diff --git a/docs/auth-provider-setup/aggregate-verifier.mdx b/docs/auth-provider-setup/aggregate-verifier.mdx index 7af287bf5..22a70d6fc 100644 --- a/docs/auth-provider-setup/aggregate-verifier.mdx +++ b/docs/auth-provider-setup/aggregate-verifier.mdx @@ -13,35 +13,36 @@ such verifiers are called `Single ID Verifiers`. ### Set up an Aggregate Verifier -1. Create an aggregate verifier for your application by selecting `Aggregate` as the Login provider from the login provider list of the modal. - ![Login Providers list on Web3Auth Dashboard](/dashboard/verifiers/login-providers-list.png) -2. Click on `Add sub-verifier` to add a new sub-verifier. - ![Add first sub-verifier on Web3Auth Dashboard](/dashboard/verifiers/aggregate-verifier/1.png) +1. Create an aggregate verifier for your application by selecting `Aggregate Multiple Providers` as the Login provider from the login providers. + ![Login Providers list on Web3Auth Dashboard](/images/dashboard/create-verifier-aggregate.png) +2. Click on `Add Sub Verifiers` to add a new sub-verifier. + ![Add first sub-verifier on Web3Auth Dashboard](/images/dashboard/create-verifier-aggregate-add-sub.png) 3. Select any social login provider from the list to start with. Here we're selecting `Google`. Paste the **Client ID** from the Google App to the - `Client ID` field and click on `Add`. - ![Select Google from Login Providers list on Web3Auth Dashboard](/dashboard/verifiers/aggregate-verifier/2.png) -4. Next, create the second sub-verifier. Click on `Add sub-verifier` to add a new sub-verifier. -5. Select `Auth0` or `Custom` from the login provider list. We're selecting `Auth0` in this example. - ![Auth0 as sub verifier on Web3Auth Dashboard](/dashboard/verifiers/aggregate-verifier/3.png) + `Client ID` field and click on `Add Sub Verifiers`. + ![Select Google from Login Providers list on Web3Auth Dashboard](/images/dashboard/create-verifier-aggregate-google.png) +4. Next, create the second sub-verifier. Click on `Add Sub Verifiers` to add a new sub-verifier. +5. Select `Auth0` from the dropdown or choose `Custom Providers` from the radio buttons. We're selecting `Auth0` in this example. + ![Auth0 as sub verifier on Web3Auth Dashboard](/images/dashboard/create-verifier-aggregate-add-second-sub.png) 6. Select the `Authentication Type` based on your application need from the dropdown. We're selecting `Github` in this example. - ![Create Aggregate Verifiier on Web3Auth Dashboard](/dashboard/verifiers/aggregate-verifier/3.png) + ![Create Aggregate Verifiier on Web3Auth Dashboard](/images/dashboard/create-verifier-aggregate-auth0-github.png) 7. Select `Email` as the **JWT Verifier ID** and enter the `Auth0 Client ID` and `Auth0 Domain` from your Auth0 application. See how to create a new Auth0 application [here](https://auth0.com/docs/quickstart/webapp/). - ![Create GitHub Sub Verifiier on Web3Auth Dashboard](/dashboard/verifiers/aggregate-verifier/4.png) + ![Create GitHub Sub Verifiier on Web3Auth Dashboard](/images/dashboard/create-verifier-aggregate-auth0-github-filled.png) ![Domain and Client ID from Auth0 Dashboard](/dashboard/verifiers/aggregate-verifier/av-a0-github.png) :::info NOTE 1. Add the [GitHub Social Connection](https://marketplace.auth0.com/integrations/github-social-connection) to your Auth0 application. - 2. One has to request email from user while setting up the GitHub Social Connection on Auth0 Dashboard. + 2. One has to request an email from the user while setting up the GitHub Social Connection on the Auth0 Dashboard. ![Request Email address for GitHub Social connection](/dashboard/verifiers/aggregate-verifier/av-a0-github-email.png) ::: -8. Similarly, creare a third sub verifier for `Email Passwordless` via Auth0. Follow the above step from 5 to 8, and select `Email Passwordless` in - place of `Github`. ![Create Email Passwordless Sub Verifiier on Web3Auth Dashboard](/dashboard/verifiers/aggregate-verifier/5.png) -9. Finally, click on `Create` to deploy the verifier. ![Login Providers list on Web3Auth Dashboard](/dashboard/verifiers/aggregate-verifier/6.png) +8. Similarly, create a third sub-verifier for `Email Passwordless` via Auth0. Follow the above steps from 5 to 8, and select `Email Passwordless` in + place of `Github`. + ![Create Email Passwordless Sub Verifiier on Web3Auth Dashboard](/images/dashboard/create-verifier-aggregate-auth0-email-passwordless-filled.png) +9. Finally, click on `Create` to deploy the verifier. :::note NOTE @@ -62,12 +63,17 @@ const clientId = "YOUR_WEB3AUTH_CLIENT_ID"; const chainConfig = { chainNamespace: "eip155", chainId: "0x1", + rpcTarget: "https://rpc.ankr.com/eth", + displayName: "Ethereum Mainnet", + blockExplorer: "https://goerli.etherscan.io", + ticker: "ETH", + tickerName: "Ethereum", }; const web3auth = new Web3AuthNoModal({ clientId, chainConfig, - web3AuthNetwork: "testnet", + web3AuthNetwork: "sapphire_mainnet", }); const privateKeyProvider = new EthereumPrivateKeyProvider({ config: { chainConfig } }); diff --git a/docs/auth-provider-setup/auth-provider-setup.mdx b/docs/auth-provider-setup/auth-provider-setup.mdx index 231b1ad0e..423a4baf8 100644 --- a/docs/auth-provider-setup/auth-provider-setup.mdx +++ b/docs/auth-provider-setup/auth-provider-setup.mdx @@ -10,8 +10,8 @@ import FederatedTiles from "@site/src/common/docs/_federated-providers.mdx"; import SocialTiles from "@site/src/common/docs/_social-login-providers.mdx"; import SocialViaFederatedTiles from "@site/src/common/docs/_social-via-federated-providers.mdx"; -Auth Provider setup refers to the capability of creating a verifier with Web3Auth. We recommend you to setup a verifier to use the Custom -Authentication feature of Web3Auth. +Auth Provider setup refers to the capability of creating a verifier with Web3Auth. We recommend you set a verifier to use the Custom Authentication +feature of Web3Auth. ## Supported Auth Providers @@ -31,7 +31,7 @@ Authentication feature of Web3Auth. :::info -For a Custom JWT based authentication services you need to use the [`Web3Auth Plug and Play No Modal SDK`](/sdk/pnp/web/no-modal/), since the Web3Auth +For Custom JWT-based authentication services, you need to use the [`Web3Auth Plug and Play No Modal SDK`](/sdk/pnp/web/no-modal/), since the Web3Auth Modal will only help you configure the social logins present within the Modal UI. ::: @@ -39,4 +39,4 @@ Modal will only help you configure the social logins present within the Modal UI There are some nuances with certain login providers, so don't hesitate to get in touch with us on [Discord](https://discord.gg/web3auth) or simply -create a [GitHub Discussion](https://web3auth.io/discussions) and we will take care of things from there. +post your query on the [Community Forum](https://web3auth.io/community) and we will take care of things from there. diff --git a/docs/auth-provider-setup/byo-jwt-providers.mdx b/docs/auth-provider-setup/byo-jwt-providers.mdx index 2e65beeb2..982049d3e 100644 --- a/docs/auth-provider-setup/byo-jwt-providers.mdx +++ b/docs/auth-provider-setup/byo-jwt-providers.mdx @@ -20,13 +20,13 @@ JWT should be exposed through an endpoint, which is used by Web3Auth to verify t :::caution Facing issue with JWT? -Checkout [**this troubleshooting page to fix those.**](/troubleshooting/jwt-errors). +Check out [**this troubleshooting page to fix those.**](/troubleshooting/jwt-errors). ::: ## Set up Custom JWT Verifier -![Custom JWT Provider on Web3Auth Dashboard](/dashboard/verifiers/custom-jwt-verifier.png) +![Custom JWT Provider on Web3Auth Dashboard](/images/dashboard/create-verifier-custom-jwt.png) To create a custom verifier for your JWT Providers, you'll need @@ -68,7 +68,7 @@ To create a custom verifier for your JWT Providers, you'll need - Token Audience ( `aud` ): The "aud" (audience) claim identifies the recipients for which the JWT is intended. Each principal intended to process the JWT MUST identify itself with a value in the audience claim. If the principal processing the claim does not identify itself with a value in the "aud" claim when this claim is present, then the JWT will be rejected. The `aud` value is a case-sensitive string containing a StringOrURI - value. The interpretation of audience values is generally application specific. + value. The interpretation of audience values is generally application-specific. - Token Issuer ( `iss` ): The issuing authority of the token. The `iss` value is a case-sensitive string containing a StringOrURI value. Use of this claim is OPTIONAL. @@ -184,7 +184,7 @@ console.log(token); -See [this](#filled-custom-jwt-verifier) to setup the custom jwt verifier using the above JWT data on Web3Auth Dashboard. +See [this](#filled-custom-jwt-verifier) to set up the custom jwt verifier using the above JWT data on the Web3Auth Dashboard. ### Login with JWT (idToken - jsonwebtoken) @@ -267,7 +267,7 @@ console.log(protectedHeader); console.log(payload); ``` -See [this](#filled-custom-jwt-verifier) to setup the custom jwt verifier using the above JWT data on Web3Auth Dashboard. +See [this](#filled-custom-jwt-verifier) to set up the custom jwt verifier using the above JWT data on the Web3Auth Dashboard. ### Login with JWT (idToken - jose) @@ -355,7 +355,7 @@ passport.use( app.use(passport.initialize()); ``` -See [this](#filled-custom-jwt-verifier) to setup the custom jwt verifier using the above JWT data on Web3Auth Dashboard. +See [this](#filled-custom-jwt-verifier) to set up the custom jwt verifier using the above JWT data on the Web3Auth Dashboard. ### Login with JWT (idToken - passport-jwt) @@ -452,7 +452,7 @@ If you're using `jose` or `jsonwebtoken` library, you can use the following step - One of the tools is https://russelldavies.github.io/jwk-creator/ - Select Public Key Use: `Signing` - Algorithm: `RS256` - - Key ID: `676da9d312c39a429932f543e6c1b6512e4983` // Use your own alpha numeric random string here. + - Key ID: `676da9d312c39a429932f543e6c1b6512e4983` // Use your own alphanumeric random string here. - PEM encoded key: `{paste-the-publicKey-pem-file-s-content-here}` - Click on `Convert` button. diff --git a/docs/auth-provider-setup/federated-identity-providers.mdx b/docs/auth-provider-setup/federated-identity-providers.mdx index d386f6f58..73b64be3b 100644 --- a/docs/auth-provider-setup/federated-identity-providers.mdx +++ b/docs/auth-provider-setup/federated-identity-providers.mdx @@ -6,8 +6,8 @@ image: "images/docs-meta-cards/documentation-card.png" --- Federated / Identity providers enable you to use some implicit and authorization code grants. You could also use social providers on top of Federated -/ Identity providers to select other Social providers (e.g: Twitter, Apple, GitHub, LinkedIn, WeChat etc.) that are not natively suported by us. Note: -This will require you to register an app with the Federated / Identity Providers. +/ Identity providers to select other Social providers (e.g.: Twitter, Apple, GitHub, LinkedIn, WeChat etc.) that are not natively supported by us. +Note: This will require you to register an app with the Federated / Identity Providers. **Supported directly through _Web3Auth Dashboard_** @@ -29,147 +29,6 @@ This will require you to register an app with the Federated / Identity Providers 4. Click on the `Create` button to create your Auth0 verifier. -### Twitter - -- [Twitter](https://marketplace.auth0.com/integrations/twitter-social-connection) - -- [How to add a Twitter Social connection in Auth0](https://auth0.com/blog/how-to-add-a-twitter-social-connection-in-auth0/#Setup-Twitter-connection) - -#### Set up Twitter via Auth0 - -1. Create a verifier for your Auth0 application by selecting `Auth0` as the Login provider from this modal. - ![Twitter - Login Providers list on Web3Auth Dashboard](/dashboard/verifiers/login-providers-list.png) -2. Select the `Twitter` as the **Authentication Type** based from the dropdown. - ![Twitter - Auth0 Authentication Type list on Web3Auth Dashboard](/dashboard/verifiers/auth0-authentication-type-list.png) -3. Enter the `Auth0 Client ID` and `Auth0 Domain` from your Auth0 application. See how to create a new Auth0 application - [here](https://auth0.com/docs/quickstart/webapp/). - - ![Twitter - Domain and Client ID from Auth0 Dashboard](/content-hub/guides/auth0/auth0-guide-clientid.png) - ![Twitter - Auth0 Client ID and Auth0 Domain on Web3Auth Dashboard](/dashboard/verifiers/auth0-verifier.png) - -4. Add the [Twitter Social Connection](https://marketplace.auth0.com/integrations/twitter-social-connection) to your Auth0 application. -5. Click on the `Create` button to create `Twitter` Custom Authentication via Auth0 verifier. - -### GitHub - -- [GitHub](https://marketplace.auth0.com/integrations/github-social-connection) - -#### Set up GitHub via Auth0 - -1. Create a verifier for your Auth0 application by selecting `Auth0` as the Login provider from this modal. - ![Twitter - Login Providers list on Web3Auth Dashboard](/dashboard/verifiers/login-providers-list.png) -2. Select the `GitHub` as the **Authentication Type** based from the dropdown. - ![Twitter - Auth0 Authentication Type list on Web3Auth Dashboard](/dashboard/verifiers/auth0-authentication-type-list.png) -3. Enter the `Auth0 Client ID` and `Auth0 Domain` from your Auth0 application. See how to create a new Auth0 application - [here](https://auth0.com/docs/quickstart/webapp/). - - ![Twitter - Domain and Client ID from Auth0 Dashboard](/content-hub/guides/auth0/auth0-guide-clientid.png) - ![Twitter - Auth0 Client ID and Auth0 Domain on Web3Auth Dashboard](/dashboard/verifiers/auth0-verifier.png) - -4. Add the [GitHub Social Connection](https://marketplace.auth0.com/integrations/github-social-connection) to your Auth0 application. -5. Click on the `Create` button to create `GitHub` Custom Authentication via Auth0 verifier. - -### Reddit - -### Apple - -- [Apple](https://marketplace.auth0.com/integrations/apple-social-connection) - -#### Set up Apple via Auth0 - -1. Create a verifier for your Auth0 application by selecting `Auth0` as the Login provider from this modal. - ![Apple - Login Providers list on Web3Auth Dashboard](/dashboard/verifiers/login-providers-list.png) -2. Select the `Apple` as the **Authentication Type** based from the dropdown. - ![Apple - Auth0 Authentication Type list on Web3Auth Dashboard](/dashboard/verifiers/auth0-authentication-type-list.png) -3. Enter the `Auth0 Client ID` and `Auth0 Domain` from your Auth0 application. See how to create a new Auth0 application - [here](https://auth0.com/docs/quickstart/webapp/). - - ![Apple - Domain and Client ID from Auth0 Dashboard](/content-hub/guides/auth0/auth0-guide-clientid.png) - ![Apple - Auth0 Client ID and Auth0 Domain on Web3Auth Dashboard](/dashboard/verifiers/auth0-verifier.png) - -4. Add the [Apple Social Connection](https://marketplace.auth0.com/integrations/apple-social-connection) to your Auth0 application. -5. Click on the `Create` button to create `Apple` Custom Authentication via Auth0 verifier. - -### LinkedIn - -- [LinkedIn](https://marketplace.auth0.com/integrations/linkedin-social-connection) - -#### Set up LinkedIn via Auth0 - -1. Create a verifier for your Auth0 application by selecting `Auth0` as the Login provider from this modal. - ![LinkedIn - Login Providers list on Web3Auth Dashboard](/dashboard/verifiers/login-providers-list.png) -2. Select the `LinkedIn` as the **Authentication Type** based from the dropdown. - ![LinkedIn - Auth0 Authentication Type list on Web3Auth Dashboard](/dashboard/verifiers/auth0-authentication-type-list.png) -3. Enter the `Auth0 Client ID` and `Auth0 Domain` from your Auth0 application. See how to create a new Auth0 application - [here](https://auth0.com/docs/quickstart/webapp/). - - ![LinkedIn - Domain and Client ID from Auth0 Dashboard](/content-hub/guides/auth0/auth0-guide-clientid.png) - ![LinkedIn - Auth0 Client ID and Auth0 Domain on Web3Auth Dashboard](/dashboard/verifiers/auth0-verifier.png) - -4. Add the [LinkedIn Social Connection](https://marketplace.auth0.com/integrations/linkedin-social-connection) to your Auth0 application. -5. Click on the `Create` button to create `LinkedIn` Custom Authentication via Auth0 verifier. - -### WeChat - -### LINE - -- [LINE](https://marketplace.auth0.com/integrations/line-social-connection) - -#### Set up LINE via Auth0 - -1. Create a verifier for your Auth0 application by selecting `Auth0` as the Login provider from this modal. - ![LINE - Login Providers list on Web3Auth Dashboard](/dashboard/verifiers/login-providers-list.png) -2. Select the `LINE` as the **Authentication Type** based from the dropdown. - ![LINE - Auth0 Authentication Type list on Web3Auth Dashboard](/dashboard/verifiers/auth0-authentication-type-list.png) -3. Enter the `Auth0 Client ID` and `Auth0 Domain` from your Auth0 application. See how to create a new Auth0 application - [here](https://auth0.com/docs/quickstart/webapp/). - - ![LINE - Domain and Client ID from Auth0 Dashboard](/content-hub/guides/auth0/auth0-guide-clientid.png) - ![LINE - Auth0 Client ID and Auth0 Domain on Web3Auth Dashboard](/dashboard/verifiers/auth0-verifier.png) - -4. Add the [LINE Social Connection](https://marketplace.auth0.com/integrations/line-social-connection) to your Auth0 application. -5. Click on the `Create` button to create `LINE` Custom Authentication via Auth0 verifier. - -### Weibo - -- [Weibo](https://marketplace.auth0.com/integrations/weibo-social-connection) - -#### Set up Weibo via Auth0 - -1. Create a verifier for your Auth0 application by selecting `Auth0` as the Login provider from this modal. - ![Weibo - Login Providers list on Web3Auth Dashboard](/dashboard/verifiers/login-providers-list.png) -2. Select the `Weibo` as the **Authentication Type** based from the dropdown. - ![Weibo - Auth0 Authentication Type list on Web3Auth Dashboard](/dashboard/verifiers/auth0-authentication-type-list.png) -3. Enter the `Auth0 Client ID` and `Auth0 Domain` from your Auth0 application. See how to create a new Auth0 application - [here](https://auth0.com/docs/quickstart/webapp/). - - ![Weibo - Domain and Client ID from Auth0 Dashboard](/content-hub/guides/auth0/auth0-guide-clientid.png) - ![Weibo - Auth0 Client ID and Auth0 Domain on Web3Auth Dashboard](/dashboard/verifiers/auth0-verifier.png) - -4. Add the [Weibo Social Connection](https://marketplace.auth0.com/integrations/weibo-social-connection) to your Auth0 application. -5. Click on the `Create` button to create `Weibo` Custom Authentication via Auth0 verifier. - -### KaKao - -- [KaKao](https://marketplace.auth0.com/integrations/kakao-login) - -#### Set up KaKao via Auth0 - -1. Create a verifier for your Auth0 application by selecting `Auth0` as the Login provider from this modal. - ![KaKao - Login Providers list on Web3Auth Dashboard](/dashboard/verifiers/login-providers-list.png) -2. Select the `KaKao` as the **Authentication Type** based from the dropdown. - ![KaKao - Auth0 Authentication Type list on Web3Auth Dashboard](/dashboard/verifiers/auth0-authentication-type-list.png) -3. Enter the `Auth0 Client ID` and `Auth0 Domain` from your Auth0 application. See how to create a new Auth0 application - [here](https://auth0.com/docs/quickstart/webapp/). - - ![KaKao - Domain and Client ID from Auth0 Dashboard](/content-hub/guides/auth0/auth0-guide-clientid.png) - ![KaKao - Auth0 Client ID and Auth0 Domain on Web3Auth Dashboard](/dashboard/verifiers/auth0-verifier.png) - -4. Add the [KaKao Social Connection](https://marketplace.auth0.com/integrations/kakao-login) to your Auth0 application. -5. Click on the `Create` button to create `KaKao` Custom Authentication via Auth0 verifier. - -**Supported through _Custom Login Providers_ on Dashboard** - ## AWS Cognito - [Using Custom Authentication with AWS Cognito](/content-hub/guides/cognito) @@ -177,7 +36,3 @@ This will require you to register an app with the Federated / Identity Providers ## Firebase - [Using Custom Authentication with Firebase](/content-hub/guides/firebase) - -## Okta - -{doc for Okta implementation is minting...} diff --git a/docs/auth-provider-setup/social-providers/apple.mdx b/docs/auth-provider-setup/social-providers/apple.mdx new file mode 100644 index 000000000..771112d01 --- /dev/null +++ b/docs/auth-provider-setup/social-providers/apple.mdx @@ -0,0 +1,82 @@ +--- +title: Apple Social Login with Web3Auth +sidebar_label: Apple + +displayed_sidebar: docs +description: "Apple Social Login with Web3Auth | Documentation - Web3Auth" +--- + +## Set up [Apple](https://marketplace.auth0.com/integrations/apple-social-connection) via Auth0 + +1. Create a verifier for your Auth0 application by selecting `Auth0` as the Login provider from this modal. + ![Apple - Login Providers list on Web3Auth Dashboard](/images/dashboard/create-verifier-auth0.png) +2. Select `Apple` as the **Authentication Type** based from the dropdown. + ![Apple - Auth0 Authentication Type list on Web3Auth Dashboard](/images/dashboard/create-verifier-google.png) +3. Enter the `Auth0 Client ID` and `Auth0 Domain` from your Auth0 application. See how to create a new Auth0 application + [here](https://auth0.com/docs/quickstart/webapp/). + + ![Apple - Domain and Client ID from Auth0 Dashboard](/images/dashboard/create-verifier-auth0-filled-common.png) + ![Apple - Auth0 Client ID and Auth0 Domain on Web3Auth Dashboard](/images/dashboard/create-verifier-auth0-unfilled.png) + +4. Add the [Apple Social Connection](https://marketplace.auth0.com/integrations/apple-social-connection) to your Auth0 application. +5. Click on the `Create Verifier` button. + +## Example + +```tsx +import { Web3AuthNoModal } from "@web3auth/no-modal"; +import { OpenloginAdapter } from "@web3auth/openlogin-adapter"; +import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider"; + +const clientId = "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ"; +// get it from https://dashboard.web3auth.io by creating a project. + +const chainConfig = { + chainNamespace: "eip155", + chainId: "0x1", + rpcTarget: "https://rpc.ankr.com/eth", + displayName: "Ethereum Mainnet", + blockExplorer: "https://goerli.etherscan.io", + ticker: "ETH", + tickerName: "Ethereum", +}; + +const web3auth = new Web3Auth({ + clientId, + chainConfig, + web3AuthNetwork: "sapphire_mainnet", +}); + +const privateKeyProvider = new EthereumPrivateKeyProvider({ + config: { chainConfig }, +}); + +const openloginAdapter = new OpenloginAdapter({ + privateKeyProvider, + adapterSettings: { + uxMode: "redirect", + loginConfig: { + jwt: { + verifier: "w3a-auth0-demo", // Pass the Verifier name here + typeOfLogin: "jwt", // Pass on the login provider of the verifier you've created + clientId: "hUVVf4SEsZT7syOiL0gLU9hFEtm2gQ6O", // Pass on the Auth0 `Client ID` here + }, + }, + }, +}); +web3auth.configureAdapter(openloginAdapter); +setWeb3auth(web3auth); + +// Initialize +await web3auth.init(); + +// Login with Apple +await web3auth.connectTo(WALLET_ADAPTERS.OPENLOGIN, { + loginProvider: "jwt", + extraLoginOptions: { + ddomain: "https://web3auth.au.auth0.com", // Pass on the Auth0 `Domain` here + verifierIdField: "sub", // Pass on the field name of the `sub` field in the JWT + connection: "apple", // Use this to skip Auth0 Modal for Apple login + }, +}); +``` diff --git a/docs/auth-provider-setup/social-providers/discord.mdx b/docs/auth-provider-setup/social-providers/discord.mdx index 5e21ca2ee..40feba1f6 100644 --- a/docs/auth-provider-setup/social-providers/discord.mdx +++ b/docs/auth-provider-setup/social-providers/discord.mdx @@ -6,6 +6,9 @@ displayed_sidebar: docs description: "Discord Social Login with Web3Auth | Documentation - Web3Auth" --- +import TabItem from "@theme/TabItem"; +import Tabs from "@theme/Tabs"; + :::info **[Using Discord with Web3Auth Guide](/content-hub/guides/discord)** @@ -16,11 +19,9 @@ description: "Discord Social Login with Web3Auth | Documentation - Web3Auth" 1. Create a Discord [API application](https://discord.com/developers/applications). -2. Navigate to **OAuth2** from the sidebar, and paste the following as Redirect URI into the "Redirect URI" field. - - - https://testing.openlogin.com/auth (for Web3Auth testnet used in demo applications) +2. Navigate to **OAuth2** from the sidebar, and Paste the following URI as a redirect URI into the "Redirect URIs" field. - - https://app.openlogin.com/auth (for Web3Auth mainnet used in production applications) + - https://auth.web3auth.io/auth ![Discord OAuth2.0 App Dashboard](/content-hub/social-providers/discord/discord-redirect-uri.png) @@ -33,17 +34,26 @@ description: "Discord Social Login with Web3Auth | Documentation - Web3Auth" ## Set up Discord Custom Authentication 1. Create a verifier for your Discord application by selecting `Discord` as the Login provider from this modal. - ![Login Providers list on Web3Auth Dashboard](/dashboard/verifiers/login-providers-list.png) + ![Login Providers list on Web3Auth Dashboard](/images/dashboard/create-verifier-google.png) 2. Paste the **Client ID** from the Discord App(above) to the `Client ID` field and click on Create. - ![Discord Client ID on Web3Auth Dashboard](/dashboard/verifiers/discord-verifier.png) + ![Discord Client ID on Web3Auth Dashboard](/images/dashboard/create-verifier-discord.png) ## Example + + + ```tsx import { Web3Auth } from "@web3auth/modal"; import { OpenloginAdapter } from "@web3auth/openlogin-adapter"; -const clientId = "YOUR_WEB3AUTH_CLIENT_ID"; +const clientId = "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ"; // get it from https://dashboard.web3auth.io by creating a Plug n Play project. const web3auth = new Web3Auth({ @@ -52,6 +62,11 @@ const web3auth = new Web3Auth({ chainConfig: { chainNamespace: "eip155", chainId: "0x1", + rpcTarget: "https://rpc.ankr.com/eth", + displayName: "Ethereum Mainnet", + blockExplorer: "https://goerli.etherscan.io", + ticker: "ETH", + tickerName: "Ethereum", }, }); @@ -61,9 +76,9 @@ const openloginAdapter = new OpenloginAdapter({ loginConfig: { // Discord login discord: { - verifier: "YOUR_DISCORD_VERIFIER_NAME", // Pass the Verifier name here + verifier: "w3a-discord-demo", // Pass the Verifier name here typeOfLogin: "discord", // Pass on the login provider of the verifier you've created - clientId: "DISCORD_CLIENT_ID_1234567890", // Pass on the Discord `Client ID` here + clientId: "1151006428610433095", // Pass on the Discord `Client ID` here }, }, }, @@ -77,6 +92,67 @@ await web3auth.initModal(); await web3auth.connect(); ``` + + + + +```tsx +import { Web3AuthNoModal } from "@web3auth/no-modal"; +import { OpenloginAdapter } from "@web3auth/openlogin-adapter"; +import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider"; + +const clientId = "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ"; +// get it from https://dashboard.web3auth.io by creating a project. + +const chainConfig = { + chainNamespace: "eip155", + chainId: "0x1", + rpcTarget: "https://rpc.ankr.com/eth", + displayName: "Ethereum Mainnet", + blockExplorer: "https://goerli.etherscan.io", + ticker: "ETH", + tickerName: "Ethereum", +}; + +const web3auth = new Web3Auth({ + clientId, + chainConfig, + web3AuthNetwork: "sapphire_mainnet", +}); + +const privateKeyProvider = new EthereumPrivateKeyProvider({ + config: { chainConfig }, +}); + +const openloginAdapter = new OpenloginAdapter({ + privateKeyProvider, + adapterSettings: { + uxMode: "redirect", + loginConfig: { + discord: { + verifier: "w3a-discord-demo", // Pass the Verifier name here + typeOfLogin: "discord", // Pass on the login provider of the verifier you've created + clientId: "1151006428610433095", // Pass on the Discord `Client ID` here + }, + }, + }, +}); +web3auth.configureAdapter(openloginAdapter); +setWeb3auth(web3auth); + +// Initialize +await web3auth.init(); + +// Login with Discord +await web3auth.connectTo(WALLET_ADAPTERS.OPENLOGIN, { + loginProvider: "discord", +}); +``` + + + + + ## Troubleshoot ### Duplicate token found diff --git a/docs/auth-provider-setup/social-providers/facebook.mdx b/docs/auth-provider-setup/social-providers/facebook.mdx index 07b745aeb..3ed2a41e1 100644 --- a/docs/auth-provider-setup/social-providers/facebook.mdx +++ b/docs/auth-provider-setup/social-providers/facebook.mdx @@ -6,6 +6,9 @@ displayed_sidebar: docs description: "Facebook Social Login with Web3Auth | Documentation - Web3Auth" --- +import TabItem from "@theme/TabItem"; +import Tabs from "@theme/Tabs"; + :::info **[Using Facebook with Web3Auth Guide](/content-hub/guides/facebook)** @@ -14,7 +17,7 @@ description: "Facebook Social Login with Web3Auth | Documentation - Web3Auth" ## Create a Facebook app -1. Follow Facebook's instruction to [create a new app](https://developers.facebook.com/docs/development/create-an-app). +1. Follow Facebook's instructions to [create a new app](https://developers.facebook.com/docs/development/create-an-app). 2. When creating an app, make sure to select `Consumer` from this screen to use Facebook Login. ![Facebook OAuth2.0 App Dashboard](/content-hub/social-providers/facebook/facebook-app.png) @@ -23,11 +26,9 @@ description: "Facebook Social Login with Web3Auth | Documentation - Web3Auth" ![Facebook OAuth2.0 App Dashboard](/content-hub/social-providers/facebook/facebook-login-setup.png) -4. Paste the following as Redirect URI into the "Valid OAuth Redirect URIs" field. - - - https://testing.openlogin.com/auth (for Web3Auth testnet used in demo applications) +4. Paste the following as a redirect URI into the "Valid OAuth Redirect URIs" field. - - https://app.openlogin.com/auth (for Web3Auth mainnet used in production applications) + - https://auth.web3auth.io/auth ![Facebook OAuth2.0 App Dashboard](/content-hub/social-providers/facebook/facebook-login-settings-oauth.png) @@ -38,17 +39,26 @@ description: "Facebook Social Login with Web3Auth | Documentation - Web3Auth" ## Set up Facebook Custom Authentication 1. Create a verifier for your Facebook application by selecting `Facebook` as the Login provider from this modal. - ![Login Providers list on Web3Auth Dashboard](/dashboard/verifiers/login-providers-list.png) -2. Paste the **App ID** and **App Secret** from the Facebook App(above) to the `Client ID` and `Client Secret` field respectively and click on Create. - ![Facebook Client ID on Web3Auth Dashboard](/dashboard/verifiers/facebook-verifier.png) + ![Login Providers list on Web3Auth Dashboard](/images/dashboard/create-verifier-google.png) +2. Paste the **App ID** and **App Secret** from the Facebook App(above) to the `Client ID` and `Client Secret` fields respectively and click on + Create. ![Facebook Client ID on Web3Auth Dashboard](/images/dashboard/create-verifier-facebook.png) ## Example + + + ```tsx import { Web3Auth } from "@web3auth/modal"; import { OpenloginAdapter } from "@web3auth/openlogin-adapter"; -const clientId = "YOUR_WEB3AUTH_CLIENT_ID"; +const clientId = "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ"; // get it from https://dashboard.web3auth.io by creating a Plug n Play project. const web3auth = new Web3Auth({ @@ -57,6 +67,11 @@ const web3auth = new Web3Auth({ chainConfig: { chainNamespace: "eip155", chainId: "0x1", + rpcTarget: "https://rpc.ankr.com/eth", + displayName: "Ethereum Mainnet", + blockExplorer: "https://goerli.etherscan.io", + ticker: "ETH", + tickerName: "Ethereum", }, }); @@ -66,9 +81,9 @@ const openloginAdapter = new OpenloginAdapter({ loginConfig: { // Facebook login facebook: { - verifier: "YOUR_FACEBOOK_VERIFIER_NAME", // Pass the Verifier name here + verifier: "w3a-facebook-demo", // Pass the Verifier name here typeOfLogin: "facebook", // Pass on the login provider of the verifier you've created - clientId: "FACEBOOK_CLIENT_ID_1234567890", // Pass on the Facebook `Client ID` here + clientId: "215892741216994", // Pass on the Facebook `Client ID` here }, }, }, @@ -81,3 +96,64 @@ await web3auth.initModal(); // Login with Facebook await web3auth.connect(); ``` + + + + + +```tsx +import { Web3AuthNoModal } from "@web3auth/no-modal"; +import { OpenloginAdapter } from "@web3auth/openlogin-adapter"; +import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider"; + +const clientId = "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ"; +// get it from https://dashboard.web3auth.io by creating a project. + +const chainConfig = { + chainNamespace: "eip155", + chainId: "0x1", + rpcTarget: "https://rpc.ankr.com/eth", + displayName: "Ethereum Mainnet", + blockExplorer: "https://goerli.etherscan.io", + ticker: "ETH", + tickerName: "Ethereum", +}; + +const web3auth = new Web3Auth({ + clientId, + chainConfig, + web3AuthNetwork: "sapphire_mainnet", +}); + +const privateKeyProvider = new EthereumPrivateKeyProvider({ + config: { chainConfig }, +}); + +const openloginAdapter = new OpenloginAdapter({ + privateKeyProvider, + adapterSettings: { + uxMode: "redirect", + loginConfig: { + facebook: { + verifier: "w3a-facebook-demo", // Pass the Verifier name here + typeOfLogin: "facebook", // Pass on the login provider of the verifier you've created + clientId: "215892741216994", // Pass on the Facebook `Client ID` here + }, + }, + }, +}); +web3auth.configureAdapter(openloginAdapter); +setWeb3auth(web3auth); + +// Initialize +await web3auth.init(); + +// Login with Facebook +await web3auth.connectTo(WALLET_ADAPTERS.OPENLOGIN, { + loginProvider: "facebook", +}); +``` + + + + diff --git a/docs/auth-provider-setup/social-providers/github.mdx b/docs/auth-provider-setup/social-providers/github.mdx new file mode 100644 index 000000000..8b9ce70a6 --- /dev/null +++ b/docs/auth-provider-setup/social-providers/github.mdx @@ -0,0 +1,82 @@ +--- +title: Github Social Login with Web3Auth +sidebar_label: Github + +displayed_sidebar: docs +description: "Github Social Login with Web3Auth | Documentation - Web3Auth" +--- + +## Set up [Github](https://marketplace.auth0.com/integrations/github-social-connection) via Auth0 + +1. Create a verifier for your Auth0 application by selecting `Auth0` as the Login provider from this modal. + ![Twitter - Login Providers list on Web3Auth Dashboard](/images/dashboard/create-verifier-auth0.png) +2. Select the `GitHub` as the **Authentication Type** based from the dropdown. + ![Twitter - Auth0 Authentication Type list on Web3Auth Dashboard](/dashboard/verifiers/auth0-authentication-type-list.png) +3. Enter the `Auth0 Client ID` and `Auth0 Domain` from your Auth0 application. See how to create a new Auth0 application + [here](https://auth0.com/docs/quickstart/webapp/). + + ![Github - Domain and Client ID from Auth0 Dashboard](/images/dashboard/create-verifier-auth0-filled-common.png) + ![Github - Auth0 Client ID and Auth0 Domain on Web3Auth Dashboard](/images/dashboard/create-verifier-auth0-unfilled.png) + +4. Add the [GitHub Social Connection](https://marketplace.auth0.com/integrations/github-social-connection) to your Auth0 application. +5. Click on the `Create` button to create `GitHub` Custom Authentication via Auth0 verifier. + +## Example + +```tsx +import { Web3AuthNoModal } from "@web3auth/no-modal"; +import { OpenloginAdapter } from "@web3auth/openlogin-adapter"; +import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider"; + +const clientId = "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ"; +// get it from https://dashboard.web3auth.io by creating a project. + +const chainConfig = { + chainNamespace: "eip155", + chainId: "0x1", + rpcTarget: "https://rpc.ankr.com/eth", + displayName: "Ethereum Mainnet", + blockExplorer: "https://goerli.etherscan.io", + ticker: "ETH", + tickerName: "Ethereum", +}; + +const web3auth = new Web3Auth({ + clientId, + chainConfig, + web3AuthNetwork: "sapphire_mainnet", +}); + +const privateKeyProvider = new EthereumPrivateKeyProvider({ + config: { chainConfig }, +}); + +const openloginAdapter = new OpenloginAdapter({ + privateKeyProvider, + adapterSettings: { + uxMode: "redirect", + loginConfig: { + jwt: { + verifier: "w3a-auth0-demo", // Pass the Verifier name here + typeOfLogin: "jwt", // Pass on the login provider of the verifier you've created + clientId: "hUVVf4SEsZT7syOiL0gLU9hFEtm2gQ6O", // Pass on the Auth0 `Client ID` here + }, + }, + }, +}); +web3auth.configureAdapter(openloginAdapter); +setWeb3auth(web3auth); + +// Initialize +await web3auth.init(); + +// Login with GitHub +await web3auth.connectTo(WALLET_ADAPTERS.OPENLOGIN, { + loginProvider: "jwt", + extraLoginOptions: { + domain: "https://web3auth.au.auth0.com", // Pass on the Auth0 `Domain` here + verifierIdField: "sub", // Pass on the field name of the `sub` field in the JWT + connection: "github", // Use this to skip Auth0 Modal for GitHub login + }, +}); +``` diff --git a/docs/auth-provider-setup/social-providers/google.mdx b/docs/auth-provider-setup/social-providers/google.mdx index e5fb8cd4a..f2b5efa44 100644 --- a/docs/auth-provider-setup/social-providers/google.mdx +++ b/docs/auth-provider-setup/social-providers/google.mdx @@ -6,6 +6,9 @@ displayed_sidebar: docs description: "Google Social Login with Web3Auth | Documentation - Web3Auth" --- +import TabItem from "@theme/TabItem"; +import Tabs from "@theme/Tabs"; + :::info **[Using Google with Web3Auth Guide](/content-hub/guides/google)** @@ -15,11 +18,9 @@ description: "Google Social Login with Web3Auth | Documentation - Web3Auth" ## Create a Google app 1. Follow Google’s instructions to [set up an OAuth 2.0 app.](https://support.google.com/cloud/answer/6158849?hl=en) -2. Paste the following as Redirect URI into the "Authorized redirect URIs" field. - - - https://testing.openlogin.com/auth (for Web3Auth testnet used in demo applications) +2. Paste the following URI as a redirect URI into the "Authorized redirect URIs" field. - - https://app.openlogin.com/auth (for Web3Auth mainnet used in production applications) + - https://auth.web3auth.io/auth ![Google OAuth2.0 App Dashboard](/content-hub/social-providers/google/google-app-redirect-uri.png) @@ -27,18 +28,37 @@ description: "Google Social Login with Web3Auth | Documentation - Web3Auth" ## Set up Google Custom Authentication -1. Create a verifier for your Google application by selecting `Google` as the Login provider from this modal. - ![Login Providers list on Web3Auth Dashboard](/dashboard/verifiers/login-providers-list.png) +1. Create a verifier for your Google application by first clicking on `Social Login Provider` and then selecting `Google` as the Login provider from + the dropdown list. + + ![Login Providers list on Web3Auth Dashboard](/images/dashboard/create-verifier-google.png) + 2. Paste the **Client ID** from the Google App(above) to the `Client ID` field and click on Create. - ![Google Client ID on Web3Auth Dashboard](/dashboard/verifiers/google-verifier.png) + + ![Google Client ID on Web3Auth Dashboard](/images/dashboard/create-verifier-field-error.png) + + :::note + + Google Client ID is the OAuth Client ID obtained from the Google Developer dashboard and it's a required field. + + ::: ## Example + + + ```tsx import { Web3Auth } from "@web3auth/modal"; import { OpenloginAdapter } from "@web3auth/openlogin-adapter"; -const clientId = "YOUR_WEB3AUTH_CLIENT_ID"; +const clientId = "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ"; // get it from https://dashboard.web3auth.io by creating a Plug n Play project. const web3auth = new Web3Auth({ @@ -47,6 +67,11 @@ const web3auth = new Web3Auth({ chainConfig: { chainNamespace: "eip155", chainId: "0x1", + rpcTarget: "https://rpc.ankr.com/eth", + displayName: "Ethereum Mainnet", + blockExplorer: "https://goerli.etherscan.io", + ticker: "ETH", + tickerName: "Ethereum", }, }); @@ -56,9 +81,9 @@ const openloginAdapter = new OpenloginAdapter({ loginConfig: { // Google login google: { - verifier: "YOUR_GOOGLE_VERIFIER_NAME", // Pass the Verifier name here + verifier: "w3a-google-demo", // Pass the Verifier name here typeOfLogin: "google", // Pass on the login provider of the verifier you've created - clientId: "GOOGLE_CLIENT_ID.apps.googleusercontent.com", // Pass on the Google `Client ID` here + clientId: "cri01h55lsjbsia1k7ll6qpalrus75ps.apps.googleusercontent.com", // Pass on the Google `Client ID` here }, }, }, @@ -71,3 +96,64 @@ await web3auth.initModal(); // Login with Google await web3auth.connect(); ``` + + + + + +```tsx +import { Web3AuthNoModal } from "@web3auth/no-modal"; +import { OpenloginAdapter } from "@web3auth/openlogin-adapter"; +import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider"; + +const clientId = "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ"; +// get it from https://dashboard.web3auth.io by creating a project. + +const chainConfig = { + chainNamespace: "eip155", + chainId: "0x1", + rpcTarget: "https://rpc.ankr.com/eth", + displayName: "Ethereum Mainnet", + blockExplorer: "https://goerli.etherscan.io", + ticker: "ETH", + tickerName: "Ethereum", +}; + +const web3auth = new Web3Auth({ + clientId, + chainConfig, + web3AuthNetwork: "sapphire_mainnet", +}); + +const privateKeyProvider = new EthereumPrivateKeyProvider({ + config: { chainConfig }, +}); + +const openloginAdapter = new OpenloginAdapter({ + privateKeyProvider, + adapterSettings: { + uxMode: "redirect", + loginConfig: { + google: { + verifier: "w3a-google-demo", // Pass the Verifier name here + typeOfLogin: "google", // Pass on the login provider of the verifier you've created + clientId: "cri01h55lsjbsia1k7ll6qpalrus75ps.apps.googleusercontent.com", // Pass on the Google `Client ID` here + }, + }, + }, +}); +web3auth.configureAdapter(openloginAdapter); +setWeb3auth(web3auth); + +// Initialize +await web3auth.init(); + +// Login with Google +await web3auth.connectTo(WALLET_ADAPTERS.OPENLOGIN, { + loginProvider: "google", +}); +``` + + + + diff --git a/docs/auth-provider-setup/social-providers/kakao.mdx b/docs/auth-provider-setup/social-providers/kakao.mdx new file mode 100644 index 000000000..c6e0e15f2 --- /dev/null +++ b/docs/auth-provider-setup/social-providers/kakao.mdx @@ -0,0 +1,82 @@ +--- +title: KaKao Social Login with Web3Auth +sidebar_label: KaKao + +displayed_sidebar: docs +description: "KaKao Social Login with Web3Auth | Documentation - Web3Auth" +--- + +## Set up [KaKao](https://marketplace.auth0.com/integrations/kakao-login) via Auth0 + +1. Create a verifier for your Auth0 application by selecting `Auth0` as the Login provider from this modal. + ![KaKao - Login Providers list on Web3Auth Dashboard](/images/dashboard/create-verifier-auth0.png) +2. Select the `KaKao` as the **Authentication Type** based from the dropdown. + ![KaKao - Auth0 Authentication Type list on Web3Auth Dashboard](/images/dashboard/create-verifier-google.png) +3. Enter the `Auth0 Client ID` and `Auth0 Domain` from your Auth0 application. See how to create a new Auth0 application + [here](https://auth0.com/docs/quickstart/webapp/). + + ![KaKao - Domain and Client ID from Auth0 Dashboard](/images/dashboard/create-verifier-auth0-filled-common.png) + ![KaKao - Auth0 Client ID and Auth0 Domain on Web3Auth Dashboard](/images/dashboard/create-verifier-auth0-unfilled.png) + +4. Add the [KaKao Social Connection](https://marketplace.auth0.com/integrations/kakao-login) to your Auth0 application. +5. Click on the `Create` button to create `KaKao` Custom Authentication via Auth0 verifier. + +## Example + +```tsx +import { Web3AuthNoModal } from "@web3auth/no-modal"; +import { OpenloginAdapter } from "@web3auth/openlogin-adapter"; +import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider"; + +const clientId = "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ"; +// get it from https://dashboard.web3auth.io by creating a project. + +const chainConfig = { + chainNamespace: "eip155", + chainId: "0x1", + rpcTarget: "https://rpc.ankr.com/eth", + displayName: "Ethereum Mainnet", + blockExplorer: "https://goerli.etherscan.io", + ticker: "ETH", + tickerName: "Ethereum", +}; + +const web3auth = new Web3Auth({ + clientId, + chainConfig, + web3AuthNetwork: "sapphire_mainnet", +}); + +const privateKeyProvider = new EthereumPrivateKeyProvider({ + config: { chainConfig }, +}); + +const openloginAdapter = new OpenloginAdapter({ + privateKeyProvider, + adapterSettings: { + uxMode: "redirect", + loginConfig: { + jwt: { + verifier: "w3a-auth0-demo", // Pass the Verifier name here + typeOfLogin: "jwt", // Pass on the login provider of the verifier you've created + clientId: "hUVVf4SEsZT7syOiL0gLU9hFEtm2gQ6O", // Pass on the Auth0 `Client ID` here + }, + }, + }, +}); +web3auth.configureAdapter(openloginAdapter); +setWeb3auth(web3auth); + +// Initialize +await web3auth.init(); + +// Login with Kakao +await web3auth.connectTo(WALLET_ADAPTERS.OPENLOGIN, { + loginProvider: "jwt", + extraLoginOptions: { + domain: "https://web3auth.au.auth0.com", // Pass on the Auth0 `Domain` here + verifierIdField: "sub", // Pass on the field name of the `sub` field in the JWT + connection: "kakao", // Use this to skip Auth0 Modal for Kakao login + }, +}); +``` diff --git a/docs/auth-provider-setup/social-providers/line.mdx b/docs/auth-provider-setup/social-providers/line.mdx new file mode 100644 index 000000000..2476b5a37 --- /dev/null +++ b/docs/auth-provider-setup/social-providers/line.mdx @@ -0,0 +1,82 @@ +--- +title: Line Social Login with Web3Auth +sidebar_label: Line + +displayed_sidebar: docs +description: "Line Social Login with Web3Auth | Documentation - Web3Auth" +--- + +## Set up [Line](https://marketplace.auth0.com/integrations/line-social-connection) via Auth0 + +1. Create a verifier for your Auth0 application by selecting `Auth0` as the Login provider from this modal. + ![LINE - Login Providers list on Web3Auth Dashboard](/images/dashboard/create-verifier-auth0.png) +2. Select the `LINE` as the **Authentication Type** based from the dropdown. + ![LINE - Auth0 Authentication Type list on Web3Auth Dashboard](/images/dashboard/create-verifier-google.png) +3. Enter the `Auth0 Client ID` and `Auth0 Domain` from your Auth0 application. See how to create a new Auth0 application + [here](https://auth0.com/docs/quickstart/webapp/). + + ![LINE - Domain and Client ID from Auth0 Dashboard](/images/dashboard/create-verifier-auth0-filled-common.png) + ![LINE - Auth0 Client ID and Auth0 Domain on Web3Auth Dashboard](/images/dashboard/create-verifier-auth0-unfilled.png) + +4. Add the [LINE Social Connection](https://marketplace.auth0.com/integrations/line-social-connection) to your Auth0 application. +5. Click on the `Create` button to create `LINE` Custom Authentication via Auth0 verifier. + +## Example + +```tsx +import { Web3AuthNoModal } from "@web3auth/no-modal"; +import { OpenloginAdapter } from "@web3auth/openlogin-adapter"; +import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider"; + +const clientId = "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ"; +// get it from https://dashboard.web3auth.io by creating a project. + +const chainConfig = { + chainNamespace: "eip155", + chainId: "0x1", + rpcTarget: "https://rpc.ankr.com/eth", + displayName: "Ethereum Mainnet", + blockExplorer: "https://goerli.etherscan.io", + ticker: "ETH", + tickerName: "Ethereum", +}; + +const web3auth = new Web3Auth({ + clientId, + chainConfig, + web3AuthNetwork: "sapphire_mainnet", +}); + +const privateKeyProvider = new EthereumPrivateKeyProvider({ + config: { chainConfig }, +}); + +const openloginAdapter = new OpenloginAdapter({ + privateKeyProvider, + adapterSettings: { + uxMode: "redirect", + loginConfig: { + jwt: { + verifier: "w3a-auth0-demo", // Pass the Verifier name here + typeOfLogin: "jwt", // Pass on the login provider of the verifier you've created + clientId: "hUVVf4SEsZT7syOiL0gLU9hFEtm2gQ6O", // Pass on the Auth0 `Client ID` here + }, + }, + }, +}); +web3auth.configureAdapter(openloginAdapter); +setWeb3auth(web3auth); + +// Initialize +await web3auth.init(); + +// Login with Line +await web3auth.connectTo(WALLET_ADAPTERS.OPENLOGIN, { + loginProvider: "jwt", + extraLoginOptions: { + domain: "https://web3auth.au.auth0.com", // Pass on the Auth0 `Domain` here + verifierIdField: "sub", // Pass on the field name of the `sub` field in the JWT + connection: "line", // Use this to skip Auth0 Modal for Line login + }, +}); +``` diff --git a/docs/auth-provider-setup/social-providers/linkedin.mdx b/docs/auth-provider-setup/social-providers/linkedin.mdx new file mode 100644 index 000000000..c60d35b3a --- /dev/null +++ b/docs/auth-provider-setup/social-providers/linkedin.mdx @@ -0,0 +1,82 @@ +--- +title: LinkedIn Social Login with Web3Auth +sidebar_label: LinkedIn + +displayed_sidebar: docs +description: "LinkedIn Social Login with Web3Auth | Documentation - Web3Auth" +--- + +## Set up [LinkedIn](https://marketplace.auth0.com/integrations/linkedin-social-connection) via Auth0 + +1. Create a verifier for your Auth0 application by selecting `Auth0` as the Login provider from this modal. + ![LinkedIn - Login Providers list on Web3Auth Dashboard](/images/dashboard/create-verifier-auth0.png) +2. Select `LinkedIn` as the **Authentication Type** based from the dropdown. + ![LinkedIn - Auth0 Authentication Type list on Web3Auth Dashboard](/images/dashboard/create-verifier-google.png) +3. Enter the `Auth0 Client ID` and `Auth0 Domain` from your Auth0 application. See how to create a new Auth0 application + [here](https://auth0.com/docs/quickstart/webapp/). + + ![LinkedIn - Domain and Client ID from Auth0 Dashboard](/images/dashboard/create-verifier-auth0-filled-common.png) + ![LinkedIn - Auth0 Client ID and Auth0 Domain on Web3Auth Dashboard](/images/dashboard/create-verifier-auth0-unfilled.png) + +4. Add the [LinkedIn Social Connection](https://marketplace.auth0.com/integrations/linkedin-social-connection) to your Auth0 application. +5. Click on the `Create` button to create `LinkedIn` Custom Authentication via Auth0 verifier. + +## Example + +```tsx +import { Web3AuthNoModal } from "@web3auth/no-modal"; +import { OpenloginAdapter } from "@web3auth/openlogin-adapter"; +import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider"; + +const clientId = "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ"; +// get it from https://dashboard.web3auth.io by creating a project. + +const chainConfig = { + chainNamespace: "eip155", + chainId: "0x1", + rpcTarget: "https://rpc.ankr.com/eth", + displayName: "Ethereum Mainnet", + blockExplorer: "https://goerli.etherscan.io", + ticker: "ETH", + tickerName: "Ethereum", +}; + +const web3auth = new Web3Auth({ + clientId, + chainConfig, + web3AuthNetwork: "sapphire_mainnet", +}); + +const privateKeyProvider = new EthereumPrivateKeyProvider({ + config: { chainConfig }, +}); + +const openloginAdapter = new OpenloginAdapter({ + privateKeyProvider, + adapterSettings: { + uxMode: "redirect", + loginConfig: { + jwt: { + verifier: "w3a-auth0-demo", // Pass the Verifier name here + typeOfLogin: "jwt", // Pass on the login provider of the verifier you've created + clientId: "hUVVf4SEsZT7syOiL0gLU9hFEtm2gQ6O", // Pass on the Auth0 `Client ID` here + }, + }, + }, +}); +web3auth.configureAdapter(openloginAdapter); +setWeb3auth(web3auth); + +// Initialize +await web3auth.init(); + +// Login with LinkedIn +await web3auth.connectTo(WALLET_ADAPTERS.OPENLOGIN, { + loginProvider: "jwt", + extraLoginOptions: { + domain: "https://web3auth.au.auth0.com", // Pass on the Auth0 `Domain` here + verifierIdField: "sub", // Pass on the field name of the `sub` field in the JWT + connection: "linkedin", // Use this to skip Auth0 Modal for LinkedIn login + }, +}); +``` diff --git a/docs/auth-provider-setup/social-providers/twitch.mdx b/docs/auth-provider-setup/social-providers/twitch.mdx index f86a8d9f6..c003bcf3a 100644 --- a/docs/auth-provider-setup/social-providers/twitch.mdx +++ b/docs/auth-provider-setup/social-providers/twitch.mdx @@ -6,6 +6,9 @@ displayed_sidebar: docs description: "Twitch Social Login with Web3Auth | Documentation - Web3Auth" --- +import TabItem from "@theme/TabItem"; +import Tabs from "@theme/Tabs"; + :::info **[Using Twitch with Web3Auth Guide](/content-hub/guides/twitch)** @@ -17,11 +20,9 @@ description: "Twitch Social Login with Web3Auth | Documentation - Web3Auth" 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. - - - https://testing.openlogin.com/auth (for Web3Auth testnet used in demo applications) +2. Paste the following as redirect URI into the "OAuth Redirect URLs" field. - - https://app.openlogin.com/auth (for Web3Auth mainnet used in production applications) + - https://auth.web3auth.io/auth ![Twitch OAuth2.0 App Dashboard](/content-hub/social-providers/twitch/twitch-app.png) @@ -36,12 +37,21 @@ description: "Twitch Social Login with Web3Auth | Documentation - Web3Auth" ## Set up Twitch Custom Authentication 1. Create a verifier for your Twitch application by selecting `Twitch` as the Login provider from this modal. - ![Login Providers list on Web3Auth Dashboard](/dashboard/verifiers/login-providers-list.png) + ![Login Providers list on Web3Auth Dashboard](/images/dashboard/create-verifier-google.png) 2. Paste the **Client ID** from the Twitch App(above) to the `Client ID` field and click on Create. - ![Twitch Client ID on Web3Auth Dashboard](/dashboard/verifiers/twitch-verifier.png) + ![Twitch Client ID on Web3Auth Dashboard](/images/dashboard/create-verifier-twitch.png) ## Example + + + ```tsx import { Web3Auth } from "@web3auth/modal"; import { OpenloginAdapter } from "@web3auth/openlogin-adapter"; @@ -55,6 +65,11 @@ const web3auth = new Web3Auth({ chainConfig: { chainNamespace: "eip155", chainId: "0x1", + rpcTarget: "https://rpc.ankr.com/eth", + displayName: "Ethereum Mainnet", + blockExplorer: "https://goerli.etherscan.io", + ticker: "ETH", + tickerName: "Ethereum", }, }); @@ -64,9 +79,9 @@ const openloginAdapter = new OpenloginAdapter({ loginConfig: { // Twitch login twitch: { - verifier: "YOUR_TWITCH_VERIFIER_NAME", // Pass the Verifier name here + verifier: "w3a-twitch-demo", // Pass the Verifier name here typeOfLogin: "twitch", // Pass on the login provider of the verifier you've created - clientId: "TWITCH_CLIENT_ID_1234567890", // Pass on the Twitch `Client ID` here + clientId: "3k7e70gowvxjaxg71hjnc8h8ih3bpf", // Pass on the Twitch `Client ID` here }, }, }, @@ -79,3 +94,64 @@ await web3auth.initModal(); // Login with Twitch await web3auth.connect(); ``` + + + + + +```tsx +import { Web3AuthNoModal } from "@web3auth/no-modal"; +import { OpenloginAdapter } from "@web3auth/openlogin-adapter"; +import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider"; + +const clientId = "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ"; +// get it from https://dashboard.web3auth.io by creating a project. + +const chainConfig = { + chainNamespace: "eip155", + chainId: "0x1", + rpcTarget: "https://rpc.ankr.com/eth", + displayName: "Ethereum Mainnet", + blockExplorer: "https://goerli.etherscan.io", + ticker: "ETH", + tickerName: "Ethereum", +}; + +const web3auth = new Web3Auth({ + clientId, + chainConfig, + web3AuthNetwork: "sapphire_mainnet", +}); + +const privateKeyProvider = new EthereumPrivateKeyProvider({ + config: { chainConfig }, +}); + +const openloginAdapter = new OpenloginAdapter({ + privateKeyProvider, + adapterSettings: { + uxMode: "redirect", + loginConfig: { + twitch: { + verifier: "w3a-twitch-demo", // Pass the Verifier name here + typeOfLogin: "twitch", // Pass on the login provider of the verifier you've created + clientId: "3k7e70gowvxjaxg71hjnc8h8ih3bpf", // Pass on the Twitch `Client ID` here + }, + }, + }, +}); +web3auth.configureAdapter(openloginAdapter); +setWeb3auth(web3auth); + +// Initialize +await web3auth.init(); + +// Login with Twitch +await web3auth.connectTo(WALLET_ADAPTERS.OPENLOGIN, { + loginProvider: "twitch", +}); +``` + + + + diff --git a/docs/auth-provider-setup/social-providers/twitter.mdx b/docs/auth-provider-setup/social-providers/twitter.mdx new file mode 100644 index 000000000..f69489bd8 --- /dev/null +++ b/docs/auth-provider-setup/social-providers/twitter.mdx @@ -0,0 +1,82 @@ +--- +title: Twitter Social Login with Web3Auth +sidebar_label: Twitter + +displayed_sidebar: docs +description: "Twitter Social Login with Web3Auth | Documentation - Web3Auth" +--- + +## Set up [Twitter via Auth0](https://auth0.com/blog/how-to-add-a-twitter-social-connection-in-auth0/#Setup-Twitter-connection) + +1. Create a verifier for your Auth0 application by selecting `Auth0` as the Login provider from this modal. + ![Twitter - Login Providers list on Web3Auth Dashboard](/images/dashboard/create-verifier-auth0.png) +2. Select `Twitter` as the **Authentication Type** based from the dropdown. + ![Twitter - Auth0 Authentication Type list on Web3Auth Dashboard](/images/dashboard/create-verifier-google.png) +3. Enter the `Auth0 Client ID` and `Auth0 Domain` from your Auth0 application. See how to create a new Auth0 application + [here](https://auth0.com/docs/quickstart/webapp/). + + ![Twitter - Domain and Client ID from Auth0 Dashboard](/images/dashboard/create-verifier-auth0-filled-common.png) + ![Twitter - Auth0 Client ID and Auth0 Domain on Web3Auth Dashboard](/images/dashboard/create-verifier-auth0-unfilled.png) + +4. Add the [Twitter Social Connection](https://marketplace.auth0.com/integrations/twitter-social-connection) to your Auth0 application. +5. Click on the `Create` button to create `Twitter` Custom Authentication via Auth0 verifier. + +## Example + +```tsx +import { Web3AuthNoModal } from "@web3auth/no-modal"; +import { OpenloginAdapter } from "@web3auth/openlogin-adapter"; +import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider"; + +const clientId = "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ"; +// get it from https://dashboard.web3auth.io by creating a project. + +const chainConfig = { + chainNamespace: "eip155", + chainId: "0x1", + rpcTarget: "https://rpc.ankr.com/eth", + displayName: "Ethereum Mainnet", + blockExplorer: "https://goerli.etherscan.io", + ticker: "ETH", + tickerName: "Ethereum", +}; + +const web3auth = new Web3Auth({ + clientId, + chainConfig, + web3AuthNetwork: "sapphire_mainnet", +}); + +const privateKeyProvider = new EthereumPrivateKeyProvider({ + config: { chainConfig }, +}); + +const openloginAdapter = new OpenloginAdapter({ + privateKeyProvider, + adapterSettings: { + uxMode: "redirect", + loginConfig: { + jwt: { + verifier: "w3a-auth0-demo", // Pass the Verifier name here + typeOfLogin: "jwt", // Pass on the login provider of the verifier you've created + clientId: "hUVVf4SEsZT7syOiL0gLU9hFEtm2gQ6O", // Pass on the Auth0 `Client ID` here + }, + }, + }, +}); +web3auth.configureAdapter(openloginAdapter); +setWeb3auth(web3auth); + +// Initialize +await web3auth.init(); + +// Login with Twitter / X +await web3auth.connectTo(WALLET_ADAPTERS.OPENLOGIN, { + loginProvider: "jwt", + extraLoginOptions: { + domain: "https://web3auth.au.auth0.com", // Pass on the Auth0 `Domain` here + verifierIdField: "sub", // Pass on the field name of the `sub` field in the JWT + connection: "twitter", // Use this to skip Auth0 Modal for Twitter / X login + }, +}); +``` diff --git a/docs/auth-provider-setup/social-providers/weibo.mdx b/docs/auth-provider-setup/social-providers/weibo.mdx new file mode 100644 index 000000000..2f6b9b879 --- /dev/null +++ b/docs/auth-provider-setup/social-providers/weibo.mdx @@ -0,0 +1,82 @@ +--- +title: Weibo Social Login with Web3Auth +sidebar_label: Weibo + +displayed_sidebar: docs +description: "Weibo Social Login with Web3Auth | Documentation - Web3Auth" +--- + +## Set up [Weibo](https://marketplace.auth0.com/integrations/weibo-social-connection) via Auth0 + +1. Create a verifier for your Auth0 application by selecting `Auth0` as the Login provider from this modal. + ![Weibo - Login Providers list on Web3Auth Dashboard](/images/dashboard/create-verifier-auth0.png) +2. Select the `Weibo` as the **Authentication Type** based from the dropdown. + ![Weibo - Auth0 Authentication Type list on Web3Auth Dashboard](/images/dashboard/create-verifier-google.png) +3. Enter the `Auth0 Client ID` and `Auth0 Domain` from your Auth0 application. See how to create a new Auth0 application + [here](https://auth0.com/docs/quickstart/webapp/). + + ![Weibo - Domain and Client ID from Auth0 Dashboard](/images/dashboard/create-verifier-auth0-filled-common.png) + ![Weibo - Auth0 Client ID and Auth0 Domain on Web3Auth Dashboard](/images/dashboard/create-verifier-auth0-unfilled.png) + +4. Add the [Weibo Social Connection](https://marketplace.auth0.com/integrations/weibo-social-connection) to your Auth0 application. +5. Click on the `Create` button to create `Weibo` Custom Authentication via Auth0 verifier. + +## Example + +```tsx +import { Web3AuthNoModal } from "@web3auth/no-modal"; +import { OpenloginAdapter } from "@web3auth/openlogin-adapter"; +import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider"; + +const clientId = "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ"; +// get it from https://dashboard.web3auth.io by creating a project. + +const chainConfig = { + chainNamespace: "eip155", + chainId: "0x1", + rpcTarget: "https://rpc.ankr.com/eth", + displayName: "Ethereum Mainnet", + blockExplorer: "https://goerli.etherscan.io", + ticker: "ETH", + tickerName: "Ethereum", +}; + +const web3auth = new Web3Auth({ + clientId, + chainConfig, + web3AuthNetwork: "sapphire_mainnet", +}); + +const privateKeyProvider = new EthereumPrivateKeyProvider({ + config: { chainConfig }, +}); + +const openloginAdapter = new OpenloginAdapter({ + privateKeyProvider, + adapterSettings: { + uxMode: "redirect", + loginConfig: { + jwt: { + verifier: "w3a-auth0-demo", // Pass the Verifier name here + typeOfLogin: "jwt", // Pass on the login provider of the verifier you've created + clientId: "hUVVf4SEsZT7syOiL0gLU9hFEtm2gQ6O", // Pass on the Auth0 `Client ID` here + }, + }, + }, +}); +web3auth.configureAdapter(openloginAdapter); +setWeb3auth(web3auth); + +// Initialize +await web3auth.init(); + +// Login with Weibo +await web3auth.connectTo(WALLET_ADAPTERS.OPENLOGIN, { + loginProvider: "jwt", + extraLoginOptions: { + domain: "https://web3auth.au.auth0.com", // Pass on the Auth0 `Domain` here + verifierIdField: "sub", // Pass on the field name of the `sub` field in the JWT + connection: "weibo", // Use this to skip Auth0 Modal for Weibo login + }, +}); +``` diff --git a/docs/auth-provider-setup/verifiers.mdx b/docs/auth-provider-setup/verifiers.mdx index 33a69ee96..c86a87629 100644 --- a/docs/auth-provider-setup/verifiers.mdx +++ b/docs/auth-provider-setup/verifiers.mdx @@ -1,8 +1,8 @@ --- -title: Creating Verifiers on the Web3Auth Dashboard +title: Creating Verifiers to use Custom Authentication sidebar_label: Create Verifiers displayed_sidebar: docs -description: "Creating Verifiers on the Web3Auth Dashboard | Documentation - Web3Auth" +description: "Creating Verifiers to use Custom Authentication | Documentation - Web3Auth" image: "images/docs-meta-cards/documentation-card.png" --- @@ -13,21 +13,22 @@ smart contract deployed on the Ethereum blockchain to verify the JWT token. There are two types of `Verifiers` at Web3Auth: -1. `Default Verifiers`: These are the verifiers associated with OAuth providers(Google, Facebook, Apple etc) which are owned and managed by Web3Auth's - account. -2. `Custom Verifiers`: If you want to manage your OAuth providers(Google, Facebook, Apple etc) yourself or to use some Federated Identity Providers - like Auth0, Firebase, AWS Cognito, Okta etc, or even your Custom JWT Authentication, you'll need to create a verifier on the Web3Auth's dashboard. +1. `Default Verifiers`: These are the verifiers associated with OAuth providers(Google, Facebook, Apple etc.) which are owned and managed by + Web3Auth's account. +2. `Custom Verifiers`: If you want to manage your OAuth providers(Google, Facebook, Apple etc.) yourself or to use some Federated Identity Providers + like Auth0, Firebase, AWS Cognito, Okta etc., or even your Custom JWT Authentication, you'll need to create a verifier under a project on the + Web3Auth's dashboard. -`Custom Verifier` is needed to let the user login with your custom authentication flow. The Wallet generated for a user is scoped to a -verifier. Verifier scripts determine the access structure to your user's wallets, and the set Verifier scripts are chosen to determine which logins your -application will ultimately use. +For users to be able to log in using your custom authentication flow, you will need to use a Custom Verifier. The Wallet that is generated for each +user is specific to a verifier. Verifier scripts determine the access structure to your users' wallets, and the set of Verifier scripts you choose +will determine which logins your application will ultimately use. You can read more about verifiers [in this blog post](https://medium.com/toruslabs/key-assignments-resolution-and-retrieval-afb984500612) or [in this GitHub discussion](https://github.com/orgs/Web3Auth/discussions/427#discussioncomment-3442052). -The `Custom Auth` Dashboard looks something like this: +The `Custom Authentication` tab of a project looks something like this: -![Custom Authentication Dashboard](/dashboard/custom_auth.png) +![Custom Authentication Dashboard](/images/dashboard/custom-authentication.png)
@@ -35,46 +36,32 @@ The `Custom Auth` Dashboard looks something like this: Once you click on the `Create Verifier` button, you'll see a toggle similar to this: -![Verifier Modal on Web3Auth Dashboard](/dashboard/verifiers/verifier-modal.png) +![Verifier Modal on Web3Auth Dashboard](/images/dashboard/create-verifier.png) To create a verifier, you need to input the following details: ### Verifier identifier -The identifier for your verifier. This is used to identify your verifier in the Web3Auth dashboard. You'll need this while initialising the -`Web3Auth`/`Web3AuthNoModal` SDK for setting up the custom authentication. +The identifier for your verifier. You'll need this while initializing the `Web3Auth`/`Web3AuthNoModal` SDK for setting up the custom authentication. -### Select Environment +### Choose a Login Provider -Select between `testnet`, `mainnet`, `aqua`, and `cyan`. +Select the Login Provider from the provided options. -- `testnet` is a sandbox environment for developers to experiment. People usually test and finish their integration here. -- `mainnet`, `aqua`, & `cyan` are the production environments for scalable applications. +The following is the list we have on our Dashboard: -### Login Provider +1. Social Login Providers + - [Google](/auth-provider-setup/social-providers/google) + - [Facebook](/auth-provider-setup/social-providers/facebook) + - [Twitch](/auth-provider-setup/social-providers/twitch) + - [Discord](/auth-provider-setup/social-providers/discord) +2. Custom Providers + - [Auth0](/auth-provider-setup/federated-identity-providers#auth0) + - [Custom JWT](/auth-provider-setup/byo-jwt-providers) +3. Aggregate Multiple Providers + - [Aggregate Verifier](/auth-provider-setup/aggregate-verifier) -Select the Login Provider from the list to create a verifier of that type. - -The following are the list we have on our Dashboard, if something you're loooking is not available in the list, choose `Custom` and provide the JWT -details. - -![Login Providers list on Web3Auth Dashboard](/dashboard/verifiers/login-providers-list.png) - -**Login Providers Setup** - -- [Google](/auth-provider-setup/social-providers/google) - -- [Facebook](/auth-provider-setup/social-providers/facebook) - -- [Twitch](/auth-provider-setup/social-providers/twitch) - -- [Discord](/auth-provider-setup/social-providers/discord) - -- [Auth0](/auth-provider-setup/federated-identity-providers#auth0) - -- [Custom JWT](/auth-provider-setup/byo-jwt-providers) - -- [Aggregate Verifier](/auth-provider-setup/aggregate-verifier) +If something you're looking for is not available in the list, choose `Custom Provider` and provide the JWT details. ### Can XXXX authenticator/login be supported? @@ -83,30 +70,20 @@ query to hello@web3auth.io. ## Edit Verifier -If you have created a verifier you'll see it under your personal verifiers. For team verifiers, you'll see it under the team verifiers section, but -only the team member who has created the verifier will get the option to edit that particular verifier. - -![Your Personal Verifiers](/dashboard/verifiers/your_personal_verifiers.png) +If you have created a verifier under your project, you'll see it under the custom authentication tab. Click on the three dots next to the verifier you wish to edit and click on `Update Verifier` in the dropdown. -![Verifier Options](/dashboard/verifiers/verifier_options.png) - -`Edit Verifier` modal will appear. Make the necessary changes and click on save at the botom right. +![Verifier Options](/images/dashboard/edit-verifier.png) -![Edit Verifier Modal](/dashboard/verifiers/update_verifier_modal.png) - -:::info Only Testnet verifiers can be edited Please note that only Testnet verifiers can be edited. Please reach out to us at the -[Web3Auth community](https://community.web3auth.io/) if you want to edit the Mainnet or Devnet verifiers. - -::: +The `Edit Verifier` modal will appear. Make the necessary changes and click on save at the bottom right. ## Aggregate Verifiers Developers can create `Aggregate Verifiers` from the Web3Auth Dashboard. Combining multiple login methods to create a verifier to get the same address for your user regardless of their login providers is possible while creating a verifier, for example, combining a `Google` and `Email Passwordless` login or `Google` and `GitHub` via Auth0 to access the same key for your user. These login methods should share the same Verifier ID, e.g., `email`; -such verifiers are called `Single ID Verifiers`. +Such verifiers are called `Single ID Verifiers`. :::info Aggregate Verifier Set up diff --git a/docs/dashboard-setup/billing-and-usage.mdx b/docs/dashboard-setup/billing-and-usage.mdx index 47f285c6f..a61cfb9e4 100644 --- a/docs/dashboard-setup/billing-and-usage.mdx +++ b/docs/dashboard-setup/billing-and-usage.mdx @@ -59,53 +59,50 @@ you. ### Base Plan -Base plan is **only available for individual(s).** - -In case you attempt to purchase a plan that is higher than the base plan, such as the Growth plan or above, a modal screen will appear prompting you -to select and purchase the desired plan for your team. +The base plan is free for **individuals on personal workspaces.** ### Growth Plan -The Growth plan is designed and **available for teams** that require a more customizable and advanced authentication solution. With this plan, you can -enjoy the following features: +The Growth plan is designed and **available for organizations** that require a more customizable and advanced authentication solution. With this plan, +you can enjoy the following features: - No-cost up to 3,000 Monthly Active Wallets (MAWs), with an additional charge of $0.03 per additional MAW - Custom Social Login Providers & Your Own Auth (JWT) +- Customizable Multi-Factor Authentication (MFA) for added security - Customizable Modal, Redirect & Auth Screens for a fully personalized user experience -- Basic White Labelling to match your branding -- 2 Team Seats -- Prioritized Community Support +- 4 Team Seats +- Community Support The Growth plan offers custom social login providers and your own authentication solution for added flexibility and control. Additionally, you can -enjoy a fully customizable login experience with a customizable modal, redirect, auth screens, and basic white labeling to match your branding. These -features aim to meet the needs of growing teams requiring a more advanced and customizable authentication solution while providing added security and -support. +enjoy a fully customizable login experience with a customizable mfa, customizable modal, redirect, auth screens, and basic white labeling to match +your branding. These features aim to meet the needs of growing organizations requiring a more advanced and customizable authentication solution while +providing added security and support. To upgrade to the Growth plan, simply navigate to the billing page and click on the "Choose Plan" button located under the Growth plan section. This will prompt a modal to appear where you can enter your card details and confirm the SLA to purchase the plan. ### Scale Plan -The Scale plan is designed and **available for teams** requiring higher customization, support, and security for their authentication needs. With this -plan, you can enjoy the following features: +The Scale plan is designed and **available for organizations** requiring higher customization, support, and security for their authentication needs. +With this plan, you can enjoy the following features: - No-cost up to 10,000 Monthly Active Wallets (MAWs), with an additional charge of $0.025 per additional MAW - Advanced Customized Auth (Custom Domain, SMTP) for a fully personalized and secure authentication experience +- Customizable Multi-Factor Authentication (MFA) for added security - Customizable Modal, Redirect & Auth Screens for a fully customized user experience -- Technical Advisory & Pre-launch Review to ensure a smooth and successful launch -- 4 Team Seats -- Prioritized Community Support + Ticketing (Within 2 Business Days) for timely and efficient resolution of issues +- 8 Team Seats +- Enhanced Community Support + Technical Advisory Call -These features are aimed at meeting the needs of teams that require a high level of customization, support, and security for their authentication -solution. The Scale plan offers advanced customized auth with a custom domain and SMTP capabilities for added security and flexibility. Additionally, -you can enjoy a fully customizable login experience with customizable modal, redirect, and auth screens. The plan also includes technical advisory and -pre-launch review for a successful launch, 4 team seats, prioritized community support with ticketing within two business days. +These features are aimed at meeting the needs of organizations that require a high level of customization, support, and security for their +authentication solution. The Scale plan offers advanced customized auth with a custom domain and SMTP capabilities for added security and flexibility. +Additionally, you can enjoy a fully customizable login experience with customizable modal, redirect, and auth screens. The plan also includes +technical advisory and pre-launch review for a successful launch, 8 team seats, prioritized community support with ticketing within two business days. To upgrade to the Scale plan, simply navigate to the billing page and click on the "Choose Plan" button located under the Scale plan section. This will prompt a modal to appear where you can enter your card details and confirm the SLA to purchase the plan. ### Enterprise Plan -The Enterprise plan is designed to cater to the complex requirements and high-level support needs of large teams and organizations. If your team or -organization requires a tailored authentication solution, please reach out to us by clicking on the "Contact Us" button located on the billing page. -Our team will be happy to work with you to understand your requirements and provide a custom solution that meets your needs. +The Enterprise plan is designed to cater to the complex requirements and high-level support needs of large organizations and organizations. If your +team or organization requires a tailored authentication solution, please reach out to us by clicking on the "Contact Us" button located on the billing +page. Our team will be happy to work with you to understand your requirements and provide a custom solution that meets your needs. diff --git a/docs/dashboard-setup/enable-interoperability.mdx b/docs/dashboard-setup/enable-interoperability.mdx index a5d26cb8c..428292f59 100644 --- a/docs/dashboard-setup/enable-interoperability.mdx +++ b/docs/dashboard-setup/enable-interoperability.mdx @@ -5,8 +5,6 @@ displayed_sidebar: docs description: "Enable Interoperability | Documentation - Web3Auth" --- -import CreateDashboardPnp from "@site/static/content-hub/interoperability/dashboard-create-pnp-3.png"; -import CreateDashboardPnp4 from "@site/static/content-hub/interoperability/dashboard-create-pnp-4.png"; import CreateProjectChains from "@site/static/images/dashboard/create-project-chains.png"; import InteroperablChainsWallets from "@site/static/images/dashboard/interoperable-chains-wallets.png"; import SelectChains from "@site/static/images/dashboard/select-chains.png"; diff --git a/docs/dashboard-setup/setup-custom-authentication.mdx b/docs/dashboard-setup/setup-custom-authentication.mdx index b05fd8ff5..dc17bb9c7 100644 --- a/docs/dashboard-setup/setup-custom-authentication.mdx +++ b/docs/dashboard-setup/setup-custom-authentication.mdx @@ -11,68 +11,59 @@ you can tailor your authentication process to the unique needs of your project a But before understanding about custom authentication, let us see **What is a Verifier?** +#### What is a Verifier? + A verifier is a piece of information about the OAuth provider being used by the application, which is queried by web3auth auth network nodes from a smart contract deployed on the Ethereum blockchain to verify the JWT token. There are two types of `Verifiers` at Web3Auth: -1. `Default Verifiers`: These are the verifiers associated with OAuth providers(Google, Facebook, Apple etc) which are owned and managed by Web3Auth's - account. -2. `Custom Verifiers`: If you want to manage your OAuth providers(Google, Facebook, Apple etc) yourself or to use some Federated Identity Providers - like Auth0, Firebase, AWS Cognito, Okta etc, or even your Custom JWT Authentication, you'll need to create a verifier on the Web3Auth's dashboard. +1. `Default Verifiers`: These are the verifiers associated with OAuth providers(Google, Facebook, Apple etc.) which are owned and managed by + Web3Auth's account. +2. `Custom Verifiers`: If you want to manage your OAuth providers(Google, Facebook, Apple etc.) yourself or to use some Federated Identity Providers + like Auth0, Firebase, AWS Cognito, Okta etc., or even your Custom JWT Authentication, you'll need to create a verifier under a project on the + Web3Auth's dashboard. -`Custom Verifier` is needed to let the user login with your custom authentication flow. The wallets generated for a user are scoped to a verifier. -Verifier scripts determine the access structure to your user's wallets, and the set Verifier scripts are chosen to determine which logins your -application will ultimately use. +For users to be able to log in using your custom authentication flow, you will need to use a Custom Verifier. The Wallet that is generated for each +user is specific to a verifier. Verifier scripts determine the access structure to your users' wallets, and the set of Verifier scripts you choose +will determine which logins your application will ultimately use. You can read more about verifiers [in this blog post](https://medium.com/toruslabs/key-assignments-resolution-and-retrieval-afb984500612) or [in this GitHub discussion](https://github.com/orgs/Web3Auth/discussions/427#discussioncomment-3442052). -The `Custom Auth` Dashboard looks something like this: +The `Custom Authentication` tab of a project looks something like this: + +![Custom Authentication Dashboard](/images/dashboard/custom-authentication.png) -![Custom Authentication Dashboard](/dashboard/custom_auth.png) +
## Create Verifier Once you click on the `Create Verifier` button, you'll see a toggle similar to this: -![Verifier Modal on Web3Auth Dashboard](/dashboard/verifiers/verifier-modal.png) +![Verifier Modal on Web3Auth Dashboard](/images/dashboard/create-verifier.png) To create a verifier, you need to input the following details: ### Verifier identifier -The identifier for your verifier. This is used to identify your verifier in the Web3Auth dashboard. You'll need this while initialising the -`Web3Auth`/`Web3AuthNoModal` SDK for setting up the custom authentication. - -### Select Environment - -Select between `testnet`, `mainnet`, `aqua`, and `cyan`. - -- `testnet` is a sandbox environment for developers to experiment. People usually test and finish their integration here. -- `mainnet`, `aqua` , & `cyan` are the production environments for scalable applications. - -### Login Provider - -Select the Login Provider from the list to create a verifier of that type. - -The following are the list we have on our Dashboard, if something you're loooking is not available in the list, choose `Custom` and provide the JWT -details. - -![Login Providers list on Web3Auth Dashboard](/dashboard/verifiers/login-providers-list.png) - -**Login Providers Setup** - -- [Google](/auth-provider-setup/social-providers/google) - -- [Facebook](/auth-provider-setup/social-providers/facebook) +The identifier for your verifier. You'll need this while initializing the `Web3Auth`/`Web3AuthNoModal` SDK for setting up the custom authentication. -- [Twitch](/auth-provider-setup/social-providers/twitch) +### Choose a Login Provider -- [Discord](/auth-provider-setup/social-providers/discord) +Select the Login Provider from the provided options. -- [Auth0](/auth-provider-setup/federated-identity-providers#auth0) +The following is the list we have on our Dashboard: -- [Custom JWT](/auth-provider-setup/byo-jwt-providers) +1. Social Login Providers + - [Google](/auth-provider-setup/social-providers/google) + - [Facebook](/auth-provider-setup/social-providers/facebook) + - [Twitch](/auth-provider-setup/social-providers/twitch) + - [Discord](/auth-provider-setup/social-providers/discord) +2. Custom Providers + - [Auth0](/auth-provider-setup/federated-identity-providers#auth0) + - [Custom JWT](/auth-provider-setup/byo-jwt-providers) +3. Aggregate Multiple Providers + - [Aggregate Verifier](/auth-provider-setup/aggregate-verifier) -- [Aggregate Verifier](/auth-provider-setup/aggregate-verifier) +If something you're looking for is not available in the list, choose `Custom Provider` and provide the JWT details. diff --git a/sidebars.js b/sidebars.js index d423221d2..f3fe31821 100644 --- a/sidebars.js +++ b/sidebars.js @@ -148,6 +148,14 @@ module.exports = { "auth-provider-setup/social-providers/facebook", "auth-provider-setup/social-providers/twitch", "auth-provider-setup/social-providers/discord", + "auth-provider-setup/social-providers/twitter", + "auth-provider-setup/social-providers/apple", + "auth-provider-setup/social-providers/linkedin", + "auth-provider-setup/social-providers/github", + "auth-provider-setup/social-providers/line", + "auth-provider-setup/social-providers/weibo", + "auth-provider-setup/social-providers/kakao", + ], collapsible: true, collapsed: false, diff --git a/static/images/dashboard/create-verifier-aggregate-add-second-sub.png b/static/images/dashboard/create-verifier-aggregate-add-second-sub.png new file mode 100644 index 000000000..26d881e2d Binary files /dev/null and b/static/images/dashboard/create-verifier-aggregate-add-second-sub.png differ diff --git a/static/images/dashboard/create-verifier-aggregate-add-sub.png b/static/images/dashboard/create-verifier-aggregate-add-sub.png new file mode 100644 index 000000000..12248bc62 Binary files /dev/null and b/static/images/dashboard/create-verifier-aggregate-add-sub.png differ diff --git a/static/images/dashboard/create-verifier-auth0-filled-common.png b/static/images/dashboard/create-verifier-auth0-filled-common.png new file mode 100644 index 000000000..bf22c78a4 Binary files /dev/null and b/static/images/dashboard/create-verifier-auth0-filled-common.png differ diff --git a/static/images/dashboard/create-verifier-auth0-unfilled.png b/static/images/dashboard/create-verifier-auth0-unfilled.png new file mode 100644 index 000000000..ce9428ba7 Binary files /dev/null and b/static/images/dashboard/create-verifier-auth0-unfilled.png differ diff --git a/static/images/dashboard/custom-authentication.png b/static/images/dashboard/custom-authentication.png new file mode 100644 index 000000000..32053fc25 Binary files /dev/null and b/static/images/dashboard/custom-authentication.png differ diff --git a/static/images/dashboard/edit-verifier.png b/static/images/dashboard/edit-verifier.png new file mode 100644 index 000000000..b1f53169c Binary files /dev/null and b/static/images/dashboard/edit-verifier.png differ