diff --git a/src/pages/content-hub/guides/twitch.mdx b/src/pages/content-hub/guides/twitch.mdx index 447c4a8ed..beb469d96 100644 --- a/src/pages/content-hub/guides/twitch.mdx +++ b/src/pages/content-hub/guides/twitch.mdx @@ -20,8 +20,6 @@ import SetupBaseProject from "@site/src/common/guides/_setup-base-project.mdx"; import SetupWeb3AuthDashboard from "@site/src/common/guides/_setup-web3auth-dashboard.mdx"; import Web3AuthPrerequisites from "@site/src/common/guides/_web3auth-prerequisites.mdx"; import SEO from "@site/src/components/SEO"; -import TabItem from "@theme/TabItem"; -import Tabs from "@theme/Tabs"; -This guide will cover the basics of how to set up your Web3Auth SDK and Twitch Login for the custom authentication and provide you the steps on how to +This guide will cover the basics of how to set up your Web3Auth SDK and Twitch Login for custom authentication and provide you the steps on how to develop a basic web application on the Ethereum blockchain. **Live Demo:** https://web3auth-core-twitch-demo.vercel.app @@ -49,7 +47,7 @@ When integrating Web3Auth with Twitch Login the flow looks something like this: - When a user logs in with `Twitch`, Twitch sends a JWT `id_token` to the app. This JWT token is sent to the Web3Auth SDK's login function. -- Finally, on successful validation of the JWT token, Web3Auth SDK will generate a private key for the user, in a self custodial way, resulting in +- Finally, on successful validation of the JWT token, Web3Auth SDK will generate a private key for the user, in a self-custodial way, resulting in easy onboarding for your user to the application. ## Prerequisites @@ -64,11 +62,9 @@ When integrating Web3Auth with Twitch Login the flow looks something like this: 1. Follow Twitch's [registration instructions](https://dev.twitch.tv/docs/authentication/#registration) to (register your app)[https://dev.twitch.tv/console/apps/create]. -2. Paste the following as Redirect URI into the "OAuth Redirect URLs" field. +2. Paste the following as a Redirect URI into the "OAuth Redirect URLs" field. - - https://testing.openlogin.com/auth (for Web3Auth testnet used in demo applications) - - - https://app.openlogin.com/auth (for Web3Auth mainnet used in production applications) + - [https://auth.web3auth.io/auth](https://auth.web3auth.io/auth) ![Twitch OAuth2.0 App Dashboard](/content-hub/social-providers/twitch/twitch-app.png) @@ -84,15 +80,14 @@ When integrating Web3Auth with Twitch Login the flow looks something like this: -- Create a **Verifier** from the **Custom Auth** Section of the [Web3Auth Developer Dashboard](https://dashboard.web3auth.io/) with following - configuration: +- Create a **Verifier** from the **Custom Authentication** tab of your Web3Auth project with the following configuration: - - Choose a name of your choice for the verifier identifier. `eg. twitch-core-verifier` - - Select environment: `testnet`, `mainnet`, `aqua`, or `cyan` as per your requirement. - - Select `Twitch` from the **Login Provider**. ![Twitch - Login Providers list on Web3Auth Dashboard](/dashboard/verifiers/login-providers-list.png) + - Choose a name of your choice for the verifier identifier. `eg. web3auth-twitch-demo` + - Select environment: `sapphire_devnet`, or `sapphire_mainnet` as per your requirement. + - Select `Twitch` from the **Login Provider**. ![Twitch - Login Providers list on Web3Auth Dashboard](/images/dashboard/create-verifier.png) - Paste the **Client ID** from the Twitch App(above) to the `Client ID` field. - ![Twitch Client ID on Web3Auth Dashboard](/dashboard/verifiers/twitch-verifier.png) - - Click on `Create` button to create your verifier. It may take up to 10 minutes to deploy verifier on _testnet_. You'll receive an email once it's + ![Twitch Client ID on Web3Auth Dashboard](/images/dashboard/create-verifier-twitch.png) + - Click on the `Create` button to create your verifier. It may take up to 10 minutes to deploy the verifier. You'll receive an email once it's complete. - You will require the `verifierName` of the newly created verifier and `clientId` of the Plug and Play Project. @@ -102,7 +97,7 @@ When integrating Web3Auth with Twitch Login the flow looks something like this: To use the Web3Auth SDK, you need to add the dependency of the respective platform SDK of Web3Auth to your project. To know more about the available SDKs, please have a look at this [documentation page](/sdk). -For this guide here, we will be talking through the [Web3Auth Plug and Play No Modal SDK](/sdk/pnp/web/no-modal) and using the +For this guide, we will be talking through the [Web3Auth Plug and Play No Modal SDK](/sdk/pnp/web/no-modal) and using the [OpenLogin Provider](/sdk/pnp/web/adapters/openlogin) alongside it to enable Custom Authentication through Twitch Login. diff --git a/static/content-hub/social-providers/twitch/twitch-app.png b/static/content-hub/social-providers/twitch/twitch-app.png index 227c9ba59..027dcab41 100644 Binary files a/static/content-hub/social-providers/twitch/twitch-app.png and b/static/content-hub/social-providers/twitch/twitch-app.png differ diff --git a/static/content-hub/social-providers/twitch/twitch-client-id.png b/static/content-hub/social-providers/twitch/twitch-client-id.png index dabed5088..71a930f5a 100644 Binary files a/static/content-hub/social-providers/twitch/twitch-client-id.png and b/static/content-hub/social-providers/twitch/twitch-client-id.png differ diff --git a/static/content-hub/social-providers/twitch/twitch-manage.png b/static/content-hub/social-providers/twitch/twitch-manage.png index 89e36913f..b561a098b 100644 Binary files a/static/content-hub/social-providers/twitch/twitch-manage.png and b/static/content-hub/social-providers/twitch/twitch-manage.png differ