Skip to content

Commit

Permalink
Merge pull request #478 from Web3Auth/new-auth-provider-pgs
Browse files Browse the repository at this point in the history 
New auth provider Pages as per new dashboard
  • Loading branch information
@shahbaz17
shahbaz17 authored Sep 14, 2023
2 parents 0ffbb7b + cb03e65 commit 28b3686
Show file tree
Hide file tree
Showing 26 changed files with 1,052 additions and 332 deletions.
38 changes: 22 additions & 16 deletions docs/auth-provider-setup/aggregate-verifier.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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 } });
Expand Down
8 changes: 4 additions & 4 deletions docs/auth-provider-setup/auth-provider-setup.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -31,12 +31,12 @@ 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.

:::

<BYOCustomJWTTiles />

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.
14 changes: 7 additions & 7 deletions docs/auth-provider-setup/byo-jwt-providers.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -184,7 +184,7 @@ console.log(token);

</Tabs>

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)

Expand Down Expand Up @@ -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)

Expand Down Expand Up @@ -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)

Expand Down Expand Up @@ -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.

Expand Down
149 changes: 2 additions & 147 deletions docs/auth-provider-setup/federated-identity-providers.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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_**

Expand All @@ -29,155 +29,10 @@ 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)

## Firebase

- [Using Custom Authentication with Firebase](/content-hub/guides/firebase)

## Okta

{doc for Okta implementation is minting...}
Loading

1 comment on commit 28b3686

@vercel
Copy link

@vercel vercel bot commented on 28b3686 Sep 14, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

web3auth-docs – ./

web3auth-docs-git-master-web3auth.vercel.app
web3auth-docs-web3auth.vercel.app
w3a-docs.vercel.app

Please sign in to comment.