Skip to content

Commit 5bf4ed1

Browse files
shahbaz17shahbaz17
committed
Add more content to Social connections
Google, Facebook, Twitch, Discord, and OAuth2 in general
1 parent a895c8b commit 5bf4ed1

6 files changed

Lines changed: 818 additions & 11 deletions

File tree

‎docs/authentication/social-logins/discord.mdx‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,121 @@ title: Discord Social Login with Web3Auth
33
sidebar_label: Discord
44
description: "Discord Social Login with Web3Auth | Documentation - Web3Auth"
55
---
6+
7+
import DiscordToggle from "@site/static/images/dashboard/authentication-social-connections.png";
8+
import DiscordConnection from "@site/static/images/dashboard/discord-connection.png";
9+
10+
import DiscordSetup from "@site/src/common/guides/_discord-setup.mdx";
11+
12+
Discord Login is a social login provider that allows users to sign in using their Discord
13+
credentials. Web3Auth supports Discord as a social login provider, allowing developers to offer a
14+
familiar and quick authentication method for users with Discord accounts.
15+
16+
To integrate Discord with Web3Auth, developers must first create a Discord App via the
17+
[Discord Developer Portal](https://discord.com/developers/applications).
18+
19+
:::success Enable on Dashboard
20+
21+
To use this feature, please enable `Discord` from the Social Connections section in the
22+
[Web3Auth Dashboard](https://dashboard.web3auth.io).
23+
24+
<div style={{ flexBasis: "300px", flexGrow: "1", textAlign: "center" }}>
25+
<img
26+
src={DiscordToggle}
27+
style={{ alignSelf: "center", maxWidth: "100%" }}
28+
alt="Toggle Discord Connection on Dashboard"
29+
/>
30+
</div>
31+
32+
> By default, Web3Auth uses its own pre-configured credentials for Discord login.
33+
34+
:::
35+
36+
## Create a Discord app
37+
38+
<DiscordSetup />
39+
40+
## Create a Discord Connection
41+
42+
Follow these steps to create a Discord connection:
43+
44+
1. Visit the [Web3Auth Dashboard](https://dashboard.web3auth.io).
45+
1. Go to the `Social Connections` section.
46+
1. Click on the `Settings` icon near the Discord connection.
47+
1. Enter the `Auth Connection ID`.
48+
1. Enter the `Discord Client ID`.
49+
1. Finally, click on the `Add Connection` button.
50+
51+
<div style={{ flexBasis: "300px", flexGrow: "1", textAlign: "left" }}>
52+
<img
53+
src={DiscordConnection}
54+
style={{ alignSelf: "center", maxWidth: "100%" }}
55+
alt="Discord Connection"
56+
/>
57+
</div>
58+
59+
## Usage
60+
61+
### Initialize Web3Auth
62+
63+
Wrap your app with the `Web3AuthProvider`. This provider should be as close to the root of your
64+
React tree as possible.
65+
66+
```js title="Example: React + Vite (main.tsx)"
67+
import { StrictMode } from "react";
68+
import { createRoot } from "react-dom/client";
69+
import "./index.css";
70+
71+
import { Web3AuthProvider, WEB3AUTH_NETWORK } from "@web3auth/modal/react";
72+
73+
import App from "./App.tsx";
74+
75+
createRoot(document.getElementById("root")!).render(
76+
<StrictMode>
77+
<Web3AuthProvider
78+
config={{
79+
web3AuthOptions: {
80+
clientId: "WEB3AUTH_CLIENT_ID", // Replace with your Client ID
81+
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_DEVNET,
82+
},
83+
}}
84+
>
85+
<App />
86+
</Web3AuthProvider>
87+
</StrictMode>
88+
);
89+
```
90+
91+
Since, the `Discord Connection` details are available from Dashboard, developers don't need to pass
92+
any additional parameters to the `Web3AuthProvider`.
93+
94+
> Follow our [Quickstart Guide](/quick-start) to setup the basic flow.
95+
96+
### Login with Discord
97+
98+
```jsx
99+
import { useWeb3AuthConnect, WALLET_CONNECTORS, AUTH_CONNECTION } from "@web3auth/modal/react";
100+
import { useAccount } from "wagmi";
101+
102+
function LoginPage() {
103+
const { connectTo } = useWeb3AuthConnect();
104+
const { address } = useAccount();
105+
106+
const loginWithDiscord = async () => {
107+
await connectTo(WALLET_CONNECTORS.AUTH, {
108+
// highlight-start
109+
authConnectionId: "discord-auth-connection-id",
110+
authConnection: AUTH_CONNECTION.DISCORD,
111+
// highlight-end
112+
});
113+
};
114+
115+
return (
116+
<div>
117+
<button onClick={() => loginWithDiscord()}>Login with Discord</button>
118+
<p>Address: {address}</p>
119+
{/* 0xA8b29d40d0FE6a0c153A5759B1f0059d8b7654c5 */}
120+
</div>
121+
);
122+
}
123+
```

‎docs/authentication/social-logins/facebook.mdx‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,138 @@ title: Facebook Social Login with Web3Auth
33
sidebar_label: Facebook
44
description: "Facebook Social Login with Web3Auth | Documentation - Web3Auth"
55
---
6+
7+
import FacebookToggle from "@site/static/images/dashboard/authentication-social-connections.png";
8+
import FacebookConnection from "@site/static/images/dashboard/facebook-connection.png";
9+
10+
Facebook Login enables users to sign in using their Facebook credentials. Web3Auth supports Facebook
11+
as a social login provider, allowing developers to offer a familiar and quick authentication method
12+
for users with Facebook accounts.
13+
14+
To integrate Facebook with Web3Auth, developers must first create a Facebook App via the
15+
[Meta for Developers Console](https://developers.facebook.com/).
16+
17+
:::success Enable on Dashboard
18+
19+
To use this feature, please enable `Facebook` from the Social Connections section in the
20+
[Web3Auth Dashboard](https://dashboard.web3auth.io).
21+
22+
<div style={{ flexBasis: "300px", flexGrow: "1", textAlign: "center" }}>
23+
<img
24+
src={FacebookToggle}
25+
style={{ alignSelf: "center", maxWidth: "100%" }}
26+
alt="Toggle Facebook Connection on Dashboard"
27+
/>
28+
</div>
29+
30+
> By default, Web3Auth uses its own pre-configured credentials for Facebook login.
31+
32+
:::
33+
34+
## Create a Facebook app
35+
36+
1. Follow Facebook's instructions to
37+
[create a new app](https://developers.facebook.com/docs/development/create-an-app).
38+
2. When creating an app, make sure to select `Consumer` from this screen to use Facebook Login.
39+
![Facebook OAuth2.0 App Dashboard](/guides/social-providers/facebook/facebook-app.png)
40+
41+
3. On the next screen, you'll be presented with different products you can integrate into your
42+
Facebook app. Click **"Set Up"** in the card representing the **Facebook Login** capability.
43+
44+
![Facebook OAuth2.0 App Dashboard](/guides/social-providers/facebook/facebook-login-setup.png)
45+
46+
4. Paste the following as a redirect URI into the "Valid OAuth Redirect URIs" field.
47+
48+
- https://auth.web3auth.io/auth
49+
50+
![Facebook OAuth2.0 App Dashboard](/guides/social-providers/facebook/facebook-login-settings-oauth.png)
51+
52+
5. Obtain the "App ID" and "App Secret" from the **Settings > Basic** screen.
53+
54+
![Facebook OAuth2.0 App Dashboard](/guides/social-providers/facebook/facebook-app-id-secret.png)
55+
56+
## Create a Facebook Connection
57+
58+
Follow these steps to create a Facebook connection:
59+
60+
1. Visit the [Web3Auth Dashboard](https://dashboard.web3auth.io).
61+
1. Go to the `Social Connections` section.
62+
1. Click on the `Settings` icon near the Facebook connection.
63+
1. Enter the `Auth Connection ID`.
64+
1. Enter the `Facebook App ID`.
65+
1. Enter the `Facebook App Secret`.
66+
1. Finally, click on the `Add Connection` button.
67+
68+
<div style={{ flexBasis: "300px", flexGrow: "1", textAlign: "left" }}>
69+
<img
70+
src={FacebookConnection}
71+
style={{ alignSelf: "center", maxWidth: "100%" }}
72+
alt="Facebook Connection"
73+
/>
74+
</div>
75+
76+
## Usage
77+
78+
### Initialize Web3Auth
79+
80+
Wrap your app with the `Web3AuthProvider`. This provider should be as close to the root of your
81+
React tree as possible.
82+
83+
```js title="Example: React + Vite (main.tsx)"
84+
import { StrictMode } from "react";
85+
import { createRoot } from "react-dom/client";
86+
import "./index.css";
87+
88+
import { Web3AuthProvider, WEB3AUTH_NETWORK } from "@web3auth/modal/react";
89+
90+
import App from "./App.tsx";
91+
92+
createRoot(document.getElementById("root")!).render(
93+
<StrictMode>
94+
<Web3AuthProvider
95+
config={{
96+
web3AuthOptions: {
97+
clientId: "WEB3AUTH_CLIENT_ID", // Replace with your Client ID
98+
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_DEVNET,
99+
},
100+
}}
101+
>
102+
<App />
103+
</Web3AuthProvider>
104+
</StrictMode>
105+
);
106+
```
107+
108+
Since, the `Facebook Connection` details are available from Dashboard, developers don't need to pass
109+
any additional parameters to the `Web3AuthProvider`.
110+
111+
> Follow our [Quickstart Guide](/quick-start) to setup the basic flow.
112+
113+
### Login with Google
114+
115+
```jsx
116+
import { useWeb3AuthConnect, WALLET_CONNECTORS, AUTH_CONNECTION } from "@web3auth/modal/react";
117+
import { useAccount } from "wagmi";
118+
119+
function LoginPage() {
120+
const { connectTo } = useWeb3AuthConnect();
121+
const { address } = useAccount();
122+
123+
const loginWithFacebook = async () => {
124+
await connectTo(WALLET_CONNECTORS.AUTH, {
125+
// highlight-start
126+
authConnectionId: "facebook-auth-connection-id",
127+
authConnection: AUTH_CONNECTION.FACEBOOK,
128+
// highlight-end
129+
});
130+
};
131+
132+
return (
133+
<div>
134+
<button onClick={() => loginWithFacebook()}>Login with Facebook</button>
135+
<p>Address: {address}</p>
136+
{/* 0xA8b29d40d0FE6a0c153A5759B1f0059d8b7654c5 */}
137+
</div>
138+
);
139+
}
140+
```

‎docs/authentication/social-logins/google.mdx‎

Lines changed: 127 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,130 @@
11
---
2-
title: Google Social Login with Web3Auth
2+
title: Google Login with Web3Auth
33
sidebar_label: Google
4-
description: "Google Social Login with Web3Auth | Documentation - Web3Auth"
4+
description: "Google Login with Web3Auth | Documentation - Web3Auth"
55
---
6+
7+
import GoogleToggle from "@site/static/images/dashboard/authentication-social-connections.png";
8+
import GoogleConnection from "@site/static/images/dashboard/google-connection.png";
9+
10+
Google Sign-In is a widely adopted authentication method that allows users to log in using their
11+
existing Google accounts. Web3Auth supports Google as a social login provider, enabling seamless
12+
onboarding and authentication experiences for users with Google credentials.
13+
14+
To integrate Google Sign-In with Web3Auth, developers must first configure a Google OAuth 2.0 Client
15+
ID in the Google Cloud Console.
16+
17+
:::success Enable on Dashboard
18+
19+
To use this feature, please enable `Google` from the Social Connections section in the
20+
[Web3Auth Dashboard](https://dashboard.web3auth.io).
21+
22+
<div style={{ flexBasis: "300px", flexGrow: "1", textAlign: "center" }}>
23+
<img
24+
src={GoogleToggle}
25+
style={{ alignSelf: "center", maxWidth: "100%" }}
26+
alt="Toggle Google Connection on Dashboard"
27+
/>
28+
</div>
29+
30+
> By default, Web3Auth uses its own pre-configured credentials for Google login.
31+
32+
:::
33+
34+
## Create a Google app
35+
36+
1. Follow Google’s instructions to
37+
[set up an OAuth 2.0 app.](https://support.google.com/cloud/answer/6158849?hl=en)
38+
2. Paste the following URI as a redirect URI into the "Authorized redirect URIs" field.
39+
40+
- `https://auth.web3auth.io/auth`
41+
42+
![Google OAuth2.0 App Dashboard](/guides/social-providers/google/google-app-redirect-uri.png)
43+
44+
3. Obtain the OAuth `Client ID` from the
45+
[App on the Google Developer dashboard](https://console.developers.google.com/)
46+
47+
## Create a Google Connection
48+
49+
Follow these steps to create a Google connection:
50+
51+
1. Visit the [Web3Auth Dashboard](https://dashboard.web3auth.io).
52+
1. Go to the `Social Connections` section.
53+
1. Click on the `Settings` icon near the Google connection.
54+
1. Enter the `Auth Connection ID`.
55+
1. Enter the `Google Client ID`.
56+
1. Finally, click on the `Add Connection` button.
57+
58+
<div style={{ flexBasis: "300px", flexGrow: "1", textAlign: "left" }}>
59+
<img
60+
src={GoogleConnection}
61+
style={{ alignSelf: "center", maxWidth: "100%" }}
62+
alt="Google Connection"
63+
/>
64+
</div>
65+
66+
## Usage
67+
68+
### Initialize Web3Auth
69+
70+
Wrap your app with the `Web3AuthProvider`. This provider should be as close to the root of your
71+
React tree as possible.
72+
73+
```js title="Example: React + Vite (main.tsx)"
74+
import { StrictMode } from "react";
75+
import { createRoot } from "react-dom/client";
76+
import "./index.css";
77+
78+
import { Web3AuthProvider, WEB3AUTH_NETWORK } from "@web3auth/modal/react";
79+
80+
import App from "./App.tsx";
81+
82+
createRoot(document.getElementById("root")!).render(
83+
<StrictMode>
84+
<Web3AuthProvider
85+
config={{
86+
web3AuthOptions: {
87+
clientId: "WEB3AUTH_CLIENT_ID", // Replace with your Client ID
88+
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_DEVNET,
89+
},
90+
}}
91+
>
92+
<App />
93+
</Web3AuthProvider>
94+
</StrictMode>
95+
);
96+
```
97+
98+
Since, the `Google Connection` details are available from Dashboard, developers don't need to pass
99+
any additional parameters to the `Web3AuthProvider`.
100+
101+
> Follow our [Quickstart Guide](/quick-start) to setup the basic flow.
102+
103+
### Login with Google
104+
105+
```jsx
106+
import { useWeb3AuthConnect, WALLET_CONNECTORS, AUTH_CONNECTION } from "@web3auth/modal/react";
107+
import { useAccount } from "wagmi";
108+
109+
function LoginPage() {
110+
const { connectTo } = useWeb3AuthConnect();
111+
const { address } = useAccount();
112+
113+
const loginWithGoogle = async () => {
114+
await connectTo(WALLET_CONNECTORS.AUTH, {
115+
// highlight-start
116+
authConnectionId: "google-auth-connection-id",
117+
authConnection: AUTH_CONNECTION.GOOGLE,
118+
// highlight-end
119+
});
120+
};
121+
122+
return (
123+
<div>
124+
<button onClick={() => loginWithGoogle()}>Login with Google</button>
125+
<p>Address: {address}</p>
126+
{/* 0xA8b29d40d0FE6a0c153A5759B1f0059d8b7654c5 */}
127+
</div>
128+
);
129+
}
130+
```

0 commit comments

Comments
 (0)