Skip to content

Commit 75031ef

Browse files
ihsrahamihsraham
committed
test id token with nextjs
1 parent 5e062ab commit 75031ef

File tree

4 files changed

+9113
-5203
lines changed

4 files changed

+9113
-5203
lines changed

‎quick-starts/nextjs-quick-start/app/layout.tsx‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,16 +19,22 @@ export const metadata = {
1919
};
2020

2121
// eslint-disable-next-line no-undef
22-
export default async function RootLayout({ children }: { children: React.ReactNode }) {
22+
export default async function RootLayout({
23+
children,
24+
}: {
25+
children: React.ReactNode;
26+
}) {
2327
// IMP START - SSR
2428
const headersList = await headers();
25-
const web3authInitialState = cookieToWeb3AuthState(headersList.get('cookie'));
29+
const web3authInitialState = cookieToWeb3AuthState(headersList.get("cookie"));
2630
// IMP END - SSR
2731
return (
2832
<html lang="en">
29-
<body className={inter.className}>
33+
<body className={inter.className} suppressHydrationWarning={true}>
3034
{/* // IMP START - SSR */}
31-
<Provider web3authInitialState={web3authInitialState}>{children}</Provider>
35+
<Provider web3authInitialState={web3authInitialState}>
36+
{children}
37+
</Provider>
3238
{/* // IMP END - SSR */}
3339
</body>
3440
</html>

‎quick-starts/nextjs-quick-start/components/App.tsx‎

Lines changed: 45 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
1-
import { useWeb3AuthConnect, useWeb3AuthDisconnect, useWeb3AuthUser } from "@web3auth/modal/react";
2-
// IMP START - Blockchain Calls
1+
import React, { useEffect } from "react";
2+
import {
3+
useWeb3AuthConnect,
4+
useWeb3AuthDisconnect,
5+
useWeb3AuthUser,
6+
useIdentityToken,
7+
} from "@web3auth/modal/react";
8+
// IMP START - Blockchain Calls
39
import { useAccount } from "wagmi";
410
import { SendTransaction } from "./wagmi/sendTransaction";
511
import { Balance } from "./wagmi/getBalance";
@@ -8,15 +14,25 @@ import { SwitchChain } from "./wagmi/switchNetwork";
814

915
function App() {
1016
// IMP START - Login
11-
const { connect, isConnected, loading: connectLoading, error: connectError } = useWeb3AuthConnect();
17+
const {
18+
connect,
19+
isConnected,
20+
loading: connectLoading,
21+
error: connectError,
22+
} = useWeb3AuthConnect();
1223
// IMP END - Login
1324
// IMP START - Logout
14-
const { disconnect, loading: disconnectLoading, error: disconnectError } = useWeb3AuthDisconnect();
25+
const {
26+
disconnect,
27+
loading: disconnectLoading,
28+
error: disconnectError,
29+
} = useWeb3AuthDisconnect();
1530
// IMP END - Logout
1631
const { userInfo } = useWeb3AuthUser();
1732
// IMP START - Blockchain Calls
1833
const { address, connector } = useAccount();
1934
// IMP END - Blockchain Calls
35+
const { token, getIdentityToken, error } = useIdentityToken();
2036

2137
function uiConsole(...args: any[]): void {
2238
const el = document.querySelector("#console>p");
@@ -26,6 +42,20 @@ function App() {
2642
}
2743
}
2844

45+
// Watch for token changes and display in console
46+
useEffect(() => {
47+
if (token) {
48+
uiConsole({ identityToken: token });
49+
}
50+
}, [token]);
51+
52+
// Watch for error changes and display in console
53+
useEffect(() => {
54+
if (error) {
55+
uiConsole({ error: error.message });
56+
}
57+
}, [error]);
58+
2959
const loggedInView = (
3060
<div className="grid">
3161
<h2>Connected to {connector?.name}</h2>
@@ -37,14 +67,19 @@ function App() {
3767
<button onClick={() => uiConsole(userInfo)} className="card">
3868
Get User Info
3969
</button>
70+
<button onClick={() => getIdentityToken()} className="card">
71+
Get Identity Token
72+
</button>
4073
</div>
4174
{/* IMP START - Logout */}
4275
<div>
4376
<button onClick={() => disconnect()} className="card">
4477
Log Out
4578
</button>
4679
{disconnectLoading && <div className="loading">Disconnecting...</div>}
47-
{disconnectError && <div className="error">{disconnectError.message}</div>}
80+
{disconnectError && (
81+
<div className="error">{disconnectError.message}</div>
82+
)}
4883
</div>
4984
{/* IMP END - Logout */}
5085
</div>
@@ -71,7 +106,10 @@ function App() {
71106
return (
72107
<div className="container">
73108
<h1 className="title">
74-
<a target="_blank" href="https://web3auth.io/docs/sdk/pnp/web/modal" rel="noreferrer">
109+
<a
110+
target="_blank"
111+
href="https://web3auth.io/docs/sdk/pnp/web/modal"
112+
rel="noreferrer">
75113
Web3Auth{" "}
76114
</a>
77115
& Next.js Modal Quick Start
@@ -86,8 +124,7 @@ function App() {
86124
<a
87125
href="https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-modal-sdk/quick-starts/nextjs-modal-quick-start"
88126
target="_blank"
89-
rel="noopener noreferrer"
90-
>
127+
rel="noopener noreferrer">
91128
Source code
92129
</a>
93130
</footer>

0 commit comments

Comments
 (0)