added stytch guide (#307)

* added stytch guide * added guest wallet * updated stytch guide * updated cli in main authentication page * added allowed origin * updated language, removed cli command until in prod --------- Co-authored-by: James Lawton <[email protected]>
0xsequence · Oct 3, 2024 · 9384af9 · 9384af9
1 parent 422cc74
commit 9384af9
Show file tree

Hide file tree

Showing 14 changed files with 214 additions and 26 deletions.
diff --git a/docs/pages/solutions/builder/embedded-wallet/guest-wallet-configuration.mdx b/docs/pages/solutions/builder/embedded-wallet/guest-wallet-configuration.mdx
@@ -0,0 +1,44 @@
+---
+title: Configuring Guest Wallet for Embedded Wallet Integration
+description: Learn how to configure a Guest wallet for your Embedded Wallet instance.
+---
+
+import { Callout } from "vocs/components";
+
+# Guest Wallet Configuration for Embedded Wallet
+
+Guest Wallets are a feature in the Sequence Stack that allow for ephemeral creation of an authentication idenity that lasts till the user clears their browser cache, or, sign's in again.
+
+This strategy for onboarding can be useful for providing ways to freely access your game or experience, increasing your conversion rate until players want to persist their information.
+
+Importantly, if users clear their cache or lose access to the device - any assets in the Guest Wallet will not be recoverable. Therefore, users should connect an additional authentication method if any value is associated with the wallet.
+
+<Callout type="warning">
+The Guest Wallet feature is currently in early access. To enable it, please visit https://sequence.build/earlyaccess and turn on the functionality.
+</Callout>
+
+
+To configure the Embedded Wallet for Guest Wallet, this can be accomplished with the following steps:
+
+::::steps
+
+## Builder Configuration
+
+Access your project in Sequence builder, navigate to the Embedded Wallet Configuration section, then add a Login Provider:
+
+![add login provider](/img/builder/builder_guest_wallet_add_provider.png)
+
+Finally, selecting `Guest Wallet` in the dropdown.
+
+![select guest wallet](/img/builder/builder_guess_wallet_select_provider.png)
+
+And selecting the purple `Update configuration` to input your password to update the Configuration.
+
+## Implementation
+
+Once configured, you can implement a Guest Wallet with the following code and use it like any other Embedded Wallet:
+
+```typescript [App.tsx]
+await sequence.signIn({ guest: true }, "Session name");
+```
+::::
diff --git a/docs/pages/solutions/builder/embedded-wallet/stytch-configuration.mdx b/docs/pages/solutions/builder/embedded-wallet/stytch-configuration.mdx
@@ -0,0 +1,71 @@
+---
+title: Configuring Stytch Client for Embedded Wallet Integration
+description: Learn how to configure a Stytch client for your Embedded Wallet instance. Follow steps to create and retrieve a Public Token from the Stytch dashboard.
+---
+
+import { Callout } from "vocs/components";
+
+# Stytch Configuration for Embedded Wallet
+
+In order to have Stytch auth integrated into your Embedded Wallet instance, you have to configure a Stytch application in the [Stytch Dashboard](https://stytch.com/dashboard) and configure an Embedded Wallet in [Sequence Builder](https://sequence.build/). Begin, by starting with the following below steps:
+
+<Callout type="warning">
+The Stytch authentication is currently in early access. To enable them, please visit https://sequence.build/earlyaccess and turn on the functionality.
+</Callout>
+
+
+::::steps
+
+## Sign Up / Sign In
+
+First access the [sign in page](https://stytch.com/dashboard):
+
+## Create a Project
+
+From the dropdown of projects once signed in, select `Create new project`:
+
+![Create a Project](/img/builder/stytch_create_new_project.png)
+
+Then select `CONSUMER AUTHENTICATION`:
+
+![Create new Project](/img/builder/stytch_create_project.png)
+
+And finally select `Create project`
+
+## Obtain a Stytch Project ID & Stytch Public Token
+
+From the bottom of the first screen of `Home` copy and save somewhere safe the `Stytch Project ID` & `Stych Public Token`:
+
+![Obtain a Project ID & Stytch Public Token](/img/builder/stytch_obtain_keys.png)
+
+## Update the Redirect URL
+
+For local development use `http://localhost:4444/authenticate`
+
+![Update Redirect Url](/img/builder/stytch_create_new_redirect_uri.png)
+
+Enable `Login` and `Register`, select `Set as default` and select `Confirm`:
+
+![Obtain a Project ID](/img/builder/stytch_create_new_redirect_uri_confirm.png)
+
+## Update the Allowed Origins for SDK
+
+For local development, ensure that your development URL is passed correclt such as `http://localhost:4444`
+
+![Update url for SDK](/img/builder/stytch_add_url_to_sdk.png)
+
+## Builder Configuration
+
+Next, enable Stytch authentication in the Sequence Builder by accessing your Project, the Embedded Wallet Configuration section, then adding a Login Provider:
+
+![add login provider](/img/builder/builder_stytch_add_provider.png)
+
+Finally, selecting `Stytch` in the dropdown.
+
+![select stytch](/img/builder/builder_stytch_select_provider.png)
+
+Then inputting your `Stytch Project ID`, selecting `Save changes` and selecting the purple `Update configuration` to input your password to update the Configuration.
+
+::::
+
+
diff --git a/docs/pages/solutions/wallets/embedded-wallet/examples/authentication.mdx b/docs/pages/solutions/wallets/embedded-wallet/examples/authentication.mdx
@@ -54,6 +54,10 @@ Then, choose your approach to authenticate your users:
 - [Authentication via Email](/solutions/wallets/embedded-wallet/examples/authentication#email-authentication)
 - [Authentication as a Guest](/solutions/wallets/embedded-wallet/examples/authentication#guest-embedded-wallet)
 
+<Callout type='info'>
+Enable Email (Legacy), Stytch, and Guest Wallets, by directing yourself to [the Early Access Page](https://sequence.build/earlyaccess) and enable it via the toggle.
+</Callout>
+
 ## Authentication Methods
 Signing in and signing up are the same operation; the account is automatically created if it doesn't already exist which will also instantiate a web3 wallet for the user automatically.
 
@@ -65,7 +69,9 @@ await sequence.signIn({ idToken }, "Session name");
 ```
 
 For more examples on authenticating with specific providers, please ensure your embedded wallet [configuration](/solutions/builder/embedded-wallet) is setup with the corresponding auth provider. Then reference the example implementation:
-- [Authentication with Google Login](/solutions/wallets/embedded-wallet/examples/authentication#authenticating-with-google-login)
+- [Authentication with PlayFab](/solutions/wallets/embedded-wallet/examples/authentication#authenticating-with-playfab)
+- [Authentication with Google](/solutions/wallets/embedded-wallet/examples/authentication#authenticating-with-google)
+- [Authentication with Stytch](/solutions/wallets/embedded-wallet/examples/authentication#authenticating-with-stytch)
 
 ### Email Authentication
 
@@ -102,13 +108,16 @@ const emailResponse = await sequence.signIn({ email })
 
 ### Guest Embedded Wallet
 
-The Guest wallet allows you to create an ephemeral wallet and authenticate a user without requiring them to login with a social provider or email, however is not retrievable if associated app data is deleted.
+The Guest wallet allows you to create an ephemeral wallet and authenticate a user without requiring them to login with a social provider or email, however is not retrievable if associated app data is deleted. 
+
+You can enable Guest Wallets by directing yourself to [the Early Access Page](https://sequence.build/earlyaccess) and enable it via the toggle.
 
 To create a guest wallet, pass in a boolean `guest` key set to `true`, which will create an ephemeral wallet for use in the application with all Embedded Wallet functions possible.
 
 ```typescript [App.tsx]
 await sequence.signIn({ guest: true }, "Session name");
 ```
+
 <Callout type="danger">
 Assets stored in the guest wallet after a browser cache has been cleared - or if the user has uninstalled the app - will not be accessible by the user. 
 
@@ -154,9 +163,36 @@ Utilizing the `onEmailConflict` callback with `forceCreate` to create a second w
   });
 ```
 
+## Authenticating with Specific Social Providers
 
+### Authenticating with Playfab
+In order to leverage Playfab for authentication, you must first retrieve a Playfab Ticket. This can be done by calling the API directly or leveraging a Playfab client SDK. Then simply pass your configured titleId as well as a unique user identifier as a `CustomId`. For example, the an example call is below:
 
-## Authenticating with Specific Social Providers
+```ts
+const playfabResponse = PlayFabClient.LoginWithCustomID({
+  TitleId: titleId,
+  CustomId: "<CUSTOM_ID>",
+  CreateAccount: true,
+})
+```
+
+Once you have retrieved a valid session ticket from Playfab, simply pass this to the sequence `signIn` function as a parameter to authenticate the user and create a valid session:
+
+```ts
+const response = await sequence.signIn(
+  {
+    playFabTitleId: import.meta.env.VITE_PLAYFAB_TITLE_ID,
+    playFabSessionTicket: playfabResponse.data.SessionTicket
+  },
+  'playfab session'
+)
+```
+
+It is important to ensure that the title ID that is configured in builder matches the title ID that is passed to PlayFab, otherwise you will receive an `Invalid Verifier` error.
+
+<Callout type="info">
+You can use a variety of unique user information as a parameter to pass to Playfab to retrieve the session ticket such as a user's accessToken from Google or a custom username.
+</Callout>
 
 ### Authenticating with Google
 For example in React, we can leverage the `@react-oauth/google` package in order to generate an `idToken` and pass it to Sequence:
@@ -230,34 +266,33 @@ function Login() {
 export default Login
 ```
 
-### Authenticating with Playfab
-In order to leverage Playfab for authentication, you must first retrieve a Playfab Ticket. This can be done by calling the API directly or leveraging a Playfab client SDK. Then simply pass your configured titleId as well as a unique user identifier as a `CustomId`. For example, the an example call is below:
+### Authenticating with Stytch
 
-```ts
-const playfabResponse = PlayFabClient.LoginWithCustomID({
-  TitleId: titleId,
-  CustomId: "<CUSTOM_ID>",
-  CreateAccount: true,
-})
-```
+<Callout type='info'>
+Ensure you [complete the configuration details](/solutions/builder/embedded-wallet/stytch-configuration) for Stytch prior.
+</Callout>
 
-Once you have retrieved a valid session ticket from Playfab, simply pass this to the sequence `signIn` function as a parameter to authenticate the user and create a valid session:
+You can see an example application in react with stytch [here](https://github.com/0xsequence/stytch-embedded-wallet-react-boilerplate/tree/master) with example keys for testing.
 
-```ts
-const response = await sequence.signIn(
-  {
-    playFabTitleId: import.meta.env.VITE_PLAYFAB_TITLE_ID,
-    playFabSessionTicket: playfabResponse.data.SessionTicket
-  },
-  'playfab session'
-)
-```
+### Implementation
 
-It is important to ensure that the title ID that is configured in builder matches the title ID that is passed to PlayFab, otherwise you will receive an `Invalid Verifier` error.
+We will simply retrieve an `idToken` and pass that into the Embedded Wallet SDK.
 
-<Callout type="info">
-You can use a variety of unique user information as a parameter to pass to Playfab to retrieve the session ticket such as a user's accessToken from Google or a custom username.
-</Callout>
+To do this for the signed in session for web using `@stytch/react`, use the following package `browser-cookies` to retrieve the `stytch_session_jwt` from the cookies after the callback once the redirect has been completed:
+
+```typescript
+import { SequenceWaaS } from '@0xsequence/waas'
+import cookies from 'browser-cookies'
+...
+export const sequence = new SequenceWaaS({
+  projectAccessKey: `${process.env.VITE_PROJECT_ACCESS_KEY}`,
+  waasConfigKey: `${process.env.VITE_WAAS_CONFIG_KEY}`,
+  network: "arbitrum-nova",
+});
+
+const idToken = cookies.get('stytch_session_jwt')
+await sequence.signIn({ idToken }, "Stytch Session name");
+```
 
 ## Retrieve User information from Social Providers
 

diff --git a/docs/public/img/builder/builder_guess_wallet_select_provider.png b/docs/public/img/builder/builder_guess_wallet_select_provider.png
diff --git a/docs/public/img/builder/builder_guest_wallet_add_provider.png b/docs/public/img/builder/builder_guest_wallet_add_provider.png
diff --git a/docs/public/img/builder/builder_stytch_add_provider.png b/docs/public/img/builder/builder_stytch_add_provider.png
diff --git a/docs/public/img/builder/builder_stytch_select_provider.png b/docs/public/img/builder/builder_stytch_select_provider.png
diff --git a/docs/public/img/builder/stytch_add_url_to_sdk.png b/docs/public/img/builder/stytch_add_url_to_sdk.png
diff --git a/docs/public/img/builder/stytch_create_new_project.png b/docs/public/img/builder/stytch_create_new_project.png
diff --git a/docs/public/img/builder/stytch_create_new_redirect_uri.png b/docs/public/img/builder/stytch_create_new_redirect_uri.png
diff --git a/docs/public/img/builder/stytch_create_new_redirect_uri_confirm.png b/docs/public/img/builder/stytch_create_new_redirect_uri_confirm.png
diff --git a/docs/public/img/builder/stytch_create_project.png b/docs/public/img/builder/stytch_create_project.png
diff --git a/docs/public/img/builder/stytch_obtain_keys.png b/docs/public/img/builder/stytch_obtain_keys.png
diff --git a/nav.ts b/nav.ts
@@ -121,6 +121,14 @@ export const sidebar = {
                   text: 'PlayFab Setup',
                   link: '/solutions/builder/embedded-wallet/playfab-configuration',
                 },
+                {
+                  text: 'Stytch Setup',
+                  link: '/solutions/builder/embedded-wallet/stytch-configuration',
+                },
+                {
+                  text: 'Guest Wallet Setup',
+                  link: '/solutions/builder/embedded-wallet/guest-wallet-configuration',
+                },
               ],
             },
             {