Skip to content

Commit

Permalink
Twitch guides fixed, ss updated
Browse files Browse the repository at this point in the history
  • Loading branch information
ihsraham committed Oct 24, 2023
1 parent 07f0c5f commit b59d7a5
Show file tree
Hide file tree
Showing 4 changed files with 11 additions and 16 deletions.
27 changes: 11 additions & 16 deletions src/pages/content-hub/guides/twitch.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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";

<SEO
title="Using Twitch with Web3Auth"
Expand All @@ -30,7 +28,7 @@ import Tabs from "@theme/Tabs";
slug="/content-hub/guides/twitch"
/>

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
Expand All @@ -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
Expand All @@ -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)

Expand All @@ -84,15 +80,14 @@ When integrating Web3Auth with Twitch Login the flow looks something like this:

<SetupWeb3AuthDashboard />

- 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.
Expand All @@ -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.

<SetupBaseProject />
Expand Down
Binary file modified static/content-hub/social-providers/twitch/twitch-app.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified static/content-hub/social-providers/twitch/twitch-client-id.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified static/content-hub/social-providers/twitch/twitch-manage.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit b59d7a5

Please sign in to comment.