From c2cc3ba8a86b86463299c234c808fdf6ece1b7c8 Mon Sep 17 00:00:00 2001 From: awisniew207 Date: Mon, 18 Nov 2024 15:02:33 -0800 Subject: [PATCH 1/2] AuthMethods page --- docs/build/getting-started/installing-sdk.md | 2 +- .../manage-auth-methods/add-auth-method.md | 383 +++++++++++++++++- 2 files changed, 383 insertions(+), 2 deletions(-) diff --git a/docs/build/getting-started/installing-sdk.md b/docs/build/getting-started/installing-sdk.md index e0e10fd0..fa383b56 100644 --- a/docs/build/getting-started/installing-sdk.md +++ b/docs/build/getting-started/installing-sdk.md @@ -4,7 +4,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; The `@lit-protocol/lit-node-client` package forms the core of the Lit SDK, providing essential functionality for both Node.js and browser environments. This page guides you through its installation process. -## Installation with npm or Yarn +## Installation with npm or yarn + + +```bash +npm install @lit-protocol/lit-node-client @lit-protocol/lit-auth-client @lit-protocol/constants +``` + + + + + +```bash +yarn add @lit-protocol/lit-node-client @lit-protocol/lit-auth-client @lit-protocol/constants +``` + + + + + +## Social Auth + +Social auth methods are methods that rely on a user's existing social account. Lit currently supports Google and Discord OAuth, creating an `AuthMethod` with the provided oAuth token. + +### Google OAuth + +A complete code example can be found [here](https://github.com/LIT-Protocol/developer-guides-code/tree/andrew/account-abstraction/account-abstraction/google). + +
+Click here to see a simple function that generates an AuthMethod +

+ +```ts +import { LitNodeClient } from "@lit-protocol/lit-node-client"; +import { LitNetwork, ProviderType } from "@lit-protocol/constants"; +import { LitAuthClient, GoogleProvider, getProviderFromUrl } from "@lit-protocol/lit-auth-client"; + +export const litGoogleOAuth = async () => { + try { + console.log("🔄 Connecting to the Lit network..."); + const litNodeClient = new LitNodeClient({ + litNetwork: LitNetwork.DatilDev, + debug: false, + }); + await litNodeClient.connect(); + console.log("✅ Connected to the Lit network"); + + console.log("🔄 Initializing LitAuthClient and GoogleProvider..."); + const litAuthClient = new LitAuthClient({ + litRelayConfig: { + relayApiKey: "", + }, + }); + const googleProvider = litAuthClient.initProvider( + ProviderType.Google + ); + console.log("✅ Initialized LitAuthClient and GoogleProvider"); + + if (getProviderFromUrl() !== "google") { + console.log("🔄 Signing in with Google..."); + googleProvider.signIn(); + console.log("✅ Signed in with Google"); + } else { + console.log("🔄 Google Sign-in Valid, authenticating...") + } + + const authMethod = await googleProvider.authenticate(); + console.log("✅ Authenticated with Google"); + + console.log("**LOGGING FOR DEBUGGING PURPOSES, DO NOT EXPOSE**", authMethod); + } catch (error) { + console.error("Failed to connect to Lit Network:", error); + } +}; + +``` +

+
+ +### Discord OAuth + +A complete code example can be found [here](https://github.com/LIT-Protocol/developer-guides-code/tree/andrew/account-abstraction/account-abstraction/discord). + +
+Click here to see a simple function that generates an AuthMethod +

+ +```ts +import { LitNodeClient } from "@lit-protocol/lit-node-client"; +import { LitNetwork, ProviderType } from "@lit-protocol/constants"; +import { LitAuthClient, DiscordProvider, getProviderFromUrl } from "@lit-protocol/lit-auth-client"; + +export const litDiscordOAuth = async () => { + try { + console.log("🔄 Connecting to the Lit network..."); + const litNodeClient = new LitNodeClient({ + litNetwork: LitNetwork.DatilDev, + debug: false, + }); + await litNodeClient.connect(); + console.log("✅ Connected to the Lit network"); + + console.log("🔄 Initializing LitAuthClient and DiscordProvider..."); + const litAuthClient = new LitAuthClient({ + litRelayConfig: { + relayApiKey: "", + }, + litNodeClient, + }); + const discordProvider = litAuthClient.initProvider( + ProviderType.Discord + ); + console.log("✅ Initialized LitAuthClient and DiscordProvider"); + + if (getProviderFromUrl() !== "discord") { + console.log("🔄 Signing in with Discord..."); + discordProvider.signIn(); + console.log("✅ Signed in with Discord"); + } else { + console.log("🔄 Discord Sign-in Valid, authenticating...") + } + + const authMethod = await discordProvider.authenticate(); + console.log("✅ Authenticated with Discord"); + + console.log("**LOGGING FOR DEBUGGING PURPOSES, DO NOT EXPOSE**", authMethod); + } catch (error) { + console.error("Failed to connect to Lit Network:", error); + } +}; +``` +

+
+ +## Stytch OTP + +Lit uses [Stytch](https://stytch.com/) to simplify user authentication and allow for SMS, email, WhatsApp, and TOTP authentication. The creation of an `AuthMethod` with Stytch will require you to create an account with Stytch, create a project, and retrieve the Project ID and Public Token through the [Stytch Dashboard](https://stytch.com/dashboard). + +### Email OTP + +A complete code example can be found [here](https://github.com/LIT-Protocol/developer-guides-code/tree/andrew/account-abstraction/account-abstraction/stytch-email). + +
+Click here to see a simple function that generates an AuthMethod +

+ +```ts +import { LitNodeClient } from "@lit-protocol/lit-node-client"; +import { LitNetwork, ProviderType } from "@lit-protocol/constants"; +import { LitAuthClient, StytchOtpProvider } from "@lit-protocol/lit-auth-client"; +import { StytchUIClient } from "@stytch/vanilla-js"; + +const STYTCH_PUBLIC_TOKEN = ""; +const STYTCH_PROJECT_ID = ""; + +const stytchEmailAuth = async () => { + const client = new StytchUIClient(STYTCH_PUBLIC_TOKEN); + + const emailResponse = prompt("Enter your email address"); + + console.log("🔄 Requesting email OTP from Stytch..."); + const stytchResponse = await client.otps.email.loginOrCreate(emailResponse!); + console.log("✅ Sent email OTP request to Stytch"); + + const otpResponse = prompt("Enter the code sent to your email:"); + + console.log("🔄 Authenticating with Stytch..."); + const authResponse = await client.otps.authenticate( + otpResponse!, + stytchResponse.method_id, + { + session_duration_minutes: 60, + } + ); + console.log("✅ Authenticated with Stytch"); + + console.log("🔄 Connecting to the Lit network..."); + const litNodeClient = new LitNodeClient({ + litNetwork: LitNetwork.DatilDev, + debug: false, + }); + + await litNodeClient.connect(); + console.log("✅ Connected to the Lit network"); + + console.log("🔄 Initializing LitAuthClient..."); + const litAuthClient = new LitAuthClient({ + litRelayConfig: { + relayApiKey: "", + }, + litNodeClient, + }); + console.log("✅ Initialized LitAuthClient"); + + console.log("🔄 Initializing Stytch Provider..."); + const stytchProvider = litAuthClient.initProvider( + ProviderType.StytchEmailFactorOtp, + { + userId: authResponse.user_id, + appId: STYTCH_PROJECT_ID!, + } + ); + console.log("✅ Initialized Stytch Provider"); + + console.log("🔄 Authenticating with Stytch Email OTP..."); + const authMethod = await stytchProvider.authenticate({ + accessToken: authResponse.session_jwt, + }); + console.log("✅ Authenticated with Stytch Email OTP"); + + console.log("**LOGGING FOR DEBUGGING PURPOSES, DO NOT EXPOSE**", authMethod); +}; +``` + +

+
+ +### SMS OTP + +A complete code example can be found [here](https://github.com/LIT-Protocol/developer-guides-code/tree/andrew/account-abstraction/account-abstraction/stytch-sms). + +
+Click here to see a simple function that generates an AuthMethod +

+ +```ts +import { LitNodeClient } from "@lit-protocol/lit-node-client"; +import { LitNetwork, ProviderType } from "@lit-protocol/constants"; +import { LitAuthClient, StytchOtpProvider } from "@lit-protocol/lit-auth-client"; +import { StytchUIClient } from "@stytch/vanilla-js"; + +const STYTCH_PUBLIC_TOKEN = ""; +const STYTCH_PROJECT_ID = ""; + +const stytchSmsAuth = async () => { + const client = new StytchUIClient(STYTCH_PUBLIC_TOKEN); + + const phoneNumber = prompt("Enter your phone number (format: +12345678910):"); + + console.log("🔄 Requesting SMS OTP from Stytch..."); + const stytchResponse = await client.otps.sms.loginOrCreate(phoneNumber!); + console.log("✅ Sent SMS OTP request to Stytch"); + + const otpResponse = prompt("Enter the code sent to your phone:"); + + console.log("🔄 Authenticating with Stytch..."); + const authResponse = await client.otps.authenticate( + otpResponse!, + stytchResponse.method_id, + { + session_duration_minutes: 60, + } + ); + console.log("✅ Authenticated with Stytch"); + + console.log("🔄 Connecting to the Lit network..."); + const litNodeClient = new LitNodeClient({ + litNetwork: LitNetwork.DatilDev, + debug: true, + }); + + await litNodeClient.connect(); + console.log("✅ Connected to the Lit network"); + + console.log("🔄 Initializing LitAuthClient..."); + const litAuthClient = new LitAuthClient({ + litRelayConfig: { + relayApiKey: "", + }, + litNodeClient, + }); + console.log("✅ Initialized LitAuthClient"); + + console.log("🔄 Initializing Stytch Provider..."); + const stytchProvider = litAuthClient.initProvider( + ProviderType.StytchSmsFactorOtp, + { + userId: authResponse.user_id, + appId: STYTCH_PROJECT_ID!, + } + ); + console.log("✅ Initialized Stytch Provider"); + + console.log("🔄 Authenticating with Stytch SMS OTP..."); + const authMethod = await stytchProvider.authenticate({ + accessToken: authResponse.session_jwt, + }); + console.log("✅ Authenticated with Stytch SMS OTP"); + + console.log("**LOGGING FOR DEBUGGING PURPOSES, DO NOT EXPOSE**", authMethod); +}; +``` + +

+
+ +## WebAuthn + +Through using the `@simplewebauthn/browser` package, you can create an `AuthMethod` with WebAuthn. This can be used to create passkeys that users can store in the browsers, on their devices, or even on a physical security key. + +
+Click here to see a simple function that generates an AuthMethod +

+ +```ts +import { LitNodeClient } from "@lit-protocol/lit-node-client"; +import { LitNetwork, ProviderType } from "@lit-protocol/constants"; +import { LitAuthClient, WebAuthnProvider } from "@lit-protocol/lit-auth-client"; + +export const litWebAuthnOAuth = async () => { + try { + console.log("🔄 Connecting to the Lit network..."); + const litNodeClient = new LitNodeClient({ + litNetwork: LitNetwork.DatilDev, + debug: false, + }); + await litNodeClient.connect(); + console.log("✅ Connected to the Lit network"); + + console.log("🔄 Initializing LitAuthClient and WebAuthnProvider..."); + const litAuthClient = new LitAuthClient({ + litRelayConfig: { + relayApiKey: "", + }, + litNodeClient, + }); + const webAuthnProvider = litAuthClient.initProvider( + ProviderType.WebAuthn + ); + console.log("✅ Initialized LitAuthClient and WebAuthnProvider"); + + console.log("🔄 Acquiring passkey options..."); + const options = await webAuthnProvider.register(); + console.log("✅ Acquired passkey options"); + + console.log("🔄 Creating passkey and minting PKP..."); + const txHash = await webAuthnProvider.verifyAndMintPKPThroughRelayer(options); + console.log("✅ Created passkey and minted PKP:", txHash); + + console.log("🔄 Authenticating with passkey..."); + const authMethod = await webAuthnProvider.authenticate(); + console.log("✅ Authenticated with passkey"); + + console.log("**LOGGING FOR DEBUGGING PURPOSES, DO NOT EXPOSE**", authMethod); + } catch (error) { + console.error("Failed to connect to Lit Network:", error); + } +}; +``` + +

+
+ +A complete code example can be found [here](https://github.com/LIT-Protocol/developer-guides-code/tree/andrew/account-abstraction/account-abstraction/webauthn). + +:::info +Please install `v10.0.0` of the `@simplewebauthn/browser` package. Later versions are not supported. +::: + +# Learn More + +If none of these authentication methods fit your needs, please check out the [Custom Auth Method](./add-custom-auth-method.md) guide. \ No newline at end of file From 6e4ba6bfed5f698fdd60049e2d08f9e489bf8930 Mon Sep 17 00:00:00 2001 From: awisniew207 Date: Mon, 18 Nov 2024 15:10:23 -0800 Subject: [PATCH 2/2] fix: grammar --- docs/build/pkps/manage-auth-methods/add-auth-method.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/build/pkps/manage-auth-methods/add-auth-method.md b/docs/build/pkps/manage-auth-methods/add-auth-method.md index 270279ee..6de339db 100644 --- a/docs/build/pkps/manage-auth-methods/add-auth-method.md +++ b/docs/build/pkps/manage-auth-methods/add-auth-method.md @@ -2,13 +2,13 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; # Add Auth Method -Lit supports a variety of authentication methods for minting and verifying use of PKPs. This is done through the authentication of JWT/oAuth tokens through Lit's Relay server. +Lit supports a variety of authentication methods for minting and authenticating access to PKPs. This is done through the authentication of JWT/oAuth tokens through Lit's Relay server. -The supported authentication methods are can be categorized into four types: Social Auth, Stytch OTP, WebAuthn, and Custom Auth. This guide will only cover the first three types. If you are interested in creating a custom authentication method, please refer to the [Custom Auth Method](./add-custom-auth-method.md) guide. +The supported authentication methods can be categorized into four types: Social Auth, Stytch OTP, WebAuthn, and Custom Auth. This guide will only cover the first three types. If you are interested in creating a custom authentication method, please refer to the [Custom Auth Method](./add-custom-auth-method.md) guide. ## Installation with npm or yarn -The `@lit-protocol/lit-node-client` package provides the `LitNodeClient` class, which is used to interact with the Lit network. In this case, it will specify which Lit network `AuthMethods` will mint PKPs on. +The `@lit-protocol/lit-node-client` package provides the `LitNodeClient` class, which is used to interact with the Lit network. The `@lit-protocol/lit-auth-client` package provides the `LitAuthClient` class, which is used to interact with the Lit Relay server. To use the `LitAuthClient`, you will need an API key for Lit's Relay server. If you do not have one, you can request one [here](https://forms.gle/RNZYtGYTY9BcD9MEA).