Skip to content

Commit

Permalink
Merge pull request #488 from Web3Auth/add-more-social-options
Browse files Browse the repository at this point in the history
Add more social options
  • Loading branch information
ihsraham authored Sep 20, 2023
2 parents d1ad986 + a58e7b0 commit dcc5128
Show file tree
Hide file tree
Showing 37 changed files with 1,087 additions and 76 deletions.
4 changes: 2 additions & 2 deletions docs/auth-provider-setup/aggregate-verifier.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,9 @@ such verifiers are called `Single ID Verifiers`.
`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.
5. Select `Auth0` on 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.
6. Select the `Authentication Type` based on your application need on the dropdown. We're selecting `Github` in this example.
![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/).
Expand Down
5 changes: 0 additions & 5 deletions docs/auth-provider-setup/auth-provider-setup.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ description: "Auth Provider Setup | Documentation - Web3Auth"
import BYOCustomJWTTiles from "@site/src/common/docs/_byo-custom-jwt-providers.mdx";
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 set a verifier to use the Custom Authentication
feature of Web3Auth.
Expand All @@ -19,10 +18,6 @@ feature of Web3Auth.

<SocialTiles />

#### Social via Federated/Identity Providers

<SocialViaFederatedTiles />

### Federated / Identity Providers

<FederatedTiles />
Expand Down
2 changes: 1 addition & 1 deletion docs/auth-provider-setup/federated-identity-providers.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ Note: This will require you to register an app with the Federated / Identity Pro

1. Create a verifier for your Auth0 application by selecting `Auth0` as the Login provider from this modal.
![Auth0 - Login Providers list on Web3Auth Dashboard](/dashboard/verifiers/login-providers-list.png)
2. Select the `Authentication Type` based on your application need from the dropdown.
2. Select the `Authentication Type` based on your application need on the dropdown.
![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/).
Expand Down
4 changes: 2 additions & 2 deletions docs/auth-provider-setup/social-providers/apple.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ description: "Apple Social Login with Web3Auth | Documentation - Web3Auth"

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.
2. Select `Apple` as the **Authentication Type** based on 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/).
Expand All @@ -21,7 +21,7 @@ description: "Apple Social Login with Web3Auth | Documentation - Web3Auth"
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
### Example

```tsx
import { Web3AuthNoModal } from "@web3auth/no-modal";
Expand Down
81 changes: 81 additions & 0 deletions docs/auth-provider-setup/social-providers/baidu.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
---
title: Baidu Login with Web3Auth
sidebar_label: Baidu
displayed_sidebar: docs
description: "Baidu Login with Web3Auth | Documentation - Web3Auth"
---

## Set up [Baidu](https://marketplace.auth0.com/integrations/baidu-social-connection) via Auth0

1. Create a verifier for your Auth0 application by selecting `Auth0` as the Login provider from this modal.
![Baidu - Login Providers list on Web3Auth Dashboard](/images/dashboard/create-verifier-auth0.png)
2. Select the `Other` as the **Authentication Type** based on the dropdown.
![Baidu - 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/).

![Baidu - Domain and Client ID from Auth0 Dashboard](/images/dashboard/create-verifier-auth0-filled-common.png)
![Baidu - Auth0 Client ID and Auth0 Domain on Web3Auth Dashboard](/images/dashboard/create-verifier-auth0-unfilled.png)

4. Add the [Baidu Social Connection](https://marketplace.auth0.com/integrations/baidu-social-connection) to your Auth0 application.
5. Click on the `Create` button to create `Baidu` 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-uk-demo", // Pass the Verifier name here
typeOfLogin: "jwt", // Pass on the login provider of the verifier you've created
clientId: "OfDAVldBEGslU9wjiWyQ1LPWOWNnnzim", // Pass on the Auth0 `Client ID` here
},
},
},
});
web3auth.configureAdapter(openloginAdapter);
setWeb3auth(web3auth);

// Initialize
await web3auth.init();

// Login with Baidu
await web3auth.connectTo(WALLET_ADAPTERS.OPENLOGIN, {
loginProvider: "jwt",
extraLoginOptions: {
domain: "https://web3auth.uk.auth0.com", // Pass on the Auth0 `Domain` here
verifierIdField: "sub", // Pass on the field name of the `sub` field in the JWT
connection: "baidu", // Use this to skip Auth0 Modal for Baidu login
},
});
```
81 changes: 81 additions & 0 deletions docs/auth-provider-setup/social-providers/bitbucket.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
---
title: Bitbucket Login with Web3Auth
sidebar_label: Bitbucket
displayed_sidebar: docs
description: "Bitbucket Login with Web3Auth | Documentation - Web3Auth"
---

## Set up [Bitbucket](https://marketplace.auth0.com/integrations/bitbucket-social-connection) via Auth0

1. Create a verifier for your Auth0 application by selecting `Auth0` as the Login provider from this modal.
![Bitbucket - Login Providers list on Web3Auth Dashboard](/images/dashboard/create-verifier-auth0.png)
2. Select the `Other` as the **Authentication Type** based on the dropdown.
![Bitbucket - 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/).

![Bitbucket - Domain and Client ID from Auth0 Dashboard](/images/dashboard/create-verifier-auth0-filled-common.png)
![Bitbucket - Auth0 Client ID and Auth0 Domain on Web3Auth Dashboard](/images/dashboard/create-verifier-auth0-unfilled.png)

4. Add the [Bitbucket Social Connection](https://marketplace.auth0.com/integrations/bitbucket-social-connection) to your Auth0 application.
5. Click on the `Create` button to create `Bitbucket` 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-uk-demo", // Pass the Verifier name here
typeOfLogin: "jwt", // Pass on the login provider of the verifier you've created
clientId: "OfDAVldBEGslU9wjiWyQ1LPWOWNnnzim", // Pass on the Auth0 `Client ID` here
},
},
},
});
web3auth.configureAdapter(openloginAdapter);
setWeb3auth(web3auth);

// Initialize
await web3auth.init();

// Login with Bitbucket
await web3auth.connectTo(WALLET_ADAPTERS.OPENLOGIN, {
loginProvider: "jwt",
extraLoginOptions: {
domain: "https://web3auth.uk.auth0.com", // Pass on the Auth0 `Domain` here
verifierIdField: "sub", // Pass on the field name of the `sub` field in the JWT
connection: "bitbucket", // Use this to skip Auth0 Modal for Bitbucket login
},
});
```
79 changes: 77 additions & 2 deletions docs/auth-provider-setup/social-providers/discord.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -31,14 +31,14 @@ import Tabs from "@theme/Tabs";

![Discord OAuth2.0 App Client ID and Secret](/content-hub/social-providers/discord/discord-clientid-secret.png)

## Set up Discord Custom Authentication
## Set up Discord

1. Create a verifier for your Discord application by selecting `Discord` as the Login provider from this modal.
![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](/images/dashboard/create-verifier-discord.png)

## Example
### Example

<Tabs
defaultValue="modal"
Expand Down Expand Up @@ -185,3 +185,78 @@ await axios.post("https://discord.com/api/oauth2/token/revoke", formData, {
},
});
```

## Set up [Discord](https://marketplace.auth0.com/integrations/discord-social-connection) via Auth0

1. Create a verifier for your Auth0 application by selecting `Auth0` as the Login provider from this modal.
![Discord - Login Providers list on Web3Auth Dashboard](/images/dashboard/create-verifier-auth0.png)
2. Select the `Discord` as the **Authentication Type** based on the dropdown.
![Discord - 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/).

![Discord - Domain and Client ID from Auth0 Dashboard](/images/dashboard/create-verifier-auth0-filled-common.png)
![Discord - Auth0 Client ID and Auth0 Domain on Web3Auth Dashboard](/images/dashboard/create-verifier-auth0-unfilled.png)

4. Add the [Discord Social Connection](https://marketplace.auth0.com/integrations/discord-social-connection) to your Auth0 application.
5. Click on the `Create` button to create `Discord` 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 Discord
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: "discord", // Use this to skip Auth0 Modal for Discord login
},
});
```
Loading

1 comment on commit dcc5128

@vercel
Copy link

@vercel vercel bot commented on dcc5128 Sep 20, 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 – ./

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

Please sign in to comment.