Skip to content

Commit b9fcdff

Browse files
author
Guru
committed
feat: popup
1 parent 322ff86 commit b9fcdff

File tree

2 files changed

+193
-30
lines changed

2 files changed

+193
-30
lines changed

‎demo/redirect-flow-example/src/App.tsx‎

Lines changed: 51 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { useEffect, useState } from "react";
22
import {
33
Web3AuthMPCCoreKit,
44
WEB3AUTH_NETWORK,
5-
SubVerifierDetailsParams,
65
COREKIT_STATUS,
76
makeEthereumSigner,
87
AggregateVerifierLoginParams,
@@ -117,9 +116,9 @@ export const DEFAULT_CHAIN_CONFIG: CustomChainConfig = {
117116
};
118117

119118
function App() {
120-
const { coreKitInstance, passkeyPlugin, setCoreKitInstance, coreKitStatus, setCoreKitStatus, provider, setProvider, setWeb3 } = useCoreKit();
119+
const { coreKitInstance, passkeyPlugin, setCoreKitInstance, coreKitStatus, setCoreKitStatus, provider, setProvider, setWeb3, setUserInfo, globalLoading, getShareDescriptions } = useCoreKit();
121120

122-
const [isLoading, setIsLoading] = useState(false);
121+
const [isLoading, setIsLoading] = useState(true);
123122
const navigate = useNavigate();
124123
const [selectedTssLib, setSelectedTssLib] = useState<TssLib>(tssLibDkls);
125124

@@ -136,16 +135,17 @@ function App() {
136135
// decide whether to rehydrate session
137136
const init = async () => {
138137
// Example config to handle redirect result manually
138+
setIsLoading(true);
139139
if (coreKitInstance.status === COREKIT_STATUS.NOT_INITIALIZED) {
140-
await coreKitInstance.init({ rehydrate: true, handleRedirectResult: true });
140+
await coreKitInstance.init({ rehydrate: true, handleRedirectResult: false });
141141
setCoreKitInstance(coreKitInstance);
142142
await passkeyPlugin.initWithMpcCoreKit(coreKitInstance);
143-
if (window.location.hash.includes("state")) {
144-
// await coreKitInstance.handleRedirectResult();
145-
}
143+
setIsLoading(false);
146144
}
147145
if (coreKitInstance.status === COREKIT_STATUS.LOGGED_IN) {
148146
await setupProvider();
147+
setUserInformation();
148+
setIsLoading(false);
149149
}
150150

151151
if (coreKitInstance.status === COREKIT_STATUS.REQUIRED_SHARE) {
@@ -154,16 +154,31 @@ function App() {
154154
"required more shares, please enter your backup/ device factor key, or reset account unrecoverable once reset, please use it with caution]"
155155
);
156156
}
157-
158157
console.log("coreKitInstance.status", coreKitInstance.status);
159158
setCoreKitStatus(coreKitInstance.status);
160159
};
161160

161+
useEffect(() => {
162+
const checkForRecoveryInitiation = async () => {
163+
if (coreKitInstance.status === COREKIT_STATUS.REQUIRED_SHARE) {
164+
navigate("/recovery");
165+
uiConsole(
166+
"required more shares, please enter your backup/ device factor key, or reset account unrecoverable once reset, please use it with caution]"
167+
);
168+
}
169+
}
170+
checkForRecoveryInitiation();
171+
}, [coreKitStatus])
172+
173+
useEffect(() => {
174+
setIsLoading(globalLoading || false);
175+
}, [globalLoading]);
176+
162177
useEffect(() => {
163178
const instance = new Web3AuthMPCCoreKit({
164179
web3AuthClientId: "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ",
165180
web3AuthNetwork: selectedNetwork,
166-
uxMode: "redirect",
181+
uxMode: "popup",
167182
manualSync: false,
168183
storage: window.localStorage,
169184
tssLib: selectedTssLib,
@@ -190,32 +205,30 @@ function App() {
190205
if (!coreKitInstance) {
191206
throw new Error("initiated to login");
192207
}
193-
const verifierConfig = {
194-
aggregateVerifierIdentifier: "web-aggregate-core-kit",
195-
subVerifierDetailsArray: [
196-
{
197-
typeOfLogin: "google",
198-
verifier: "web3-aggreate-google",
199-
clientId: "759944447575-6rm643ia1i9ngmnme3eq5viiep5rp6s0.apps.googleusercontent.com",
200-
jwtParams: {
201-
verifierIdField: "email",
202-
},
203-
},
204-
],
205-
};
208+
const verifierConfig = {
209+
subVerifierDetails: {
210+
typeOfLogin: "google",
211+
verifier: "w3a-google-demo",
212+
clientId: "519228911939-cri01h55lsjbsia1k7ll6qpalrus75ps.apps.googleusercontent.com",
213+
},
214+
};
206215
// const verifierConfig = {
207-
// subVerifierDetails: {
208-
// typeOfLogin: "google",
209-
// verifier: "w3-google-temp",
210-
// clientId: "759944447575-6rm643ia1i9ngmnme3eq5viiep5rp6s0.apps.googleusercontent.com",
211-
// },
212-
// } as SubVerifierDetailsParams;
216+
// aggregateVerifierIdentifier: "web-aggregate-core-kit",
217+
// subVerifierDetails: [
218+
// {
219+
// typeOfLogin: "google",
220+
// verifier: "web3-aggreate-google",
221+
// clientId: "759944447575-6rm643ia1i9ngmnme3eq5viiep5rp6s0.apps.googleusercontent.com",
222+
// },
223+
// ],
224+
// };
213225

214226
await coreKitInstance.loginWithOAuth(verifierConfig as any);
215227
if (coreKitInstance.status === COREKIT_STATUS.LOGGED_IN) {
216228
await coreKitInstance.commitChanges(); // Needed for new accounts
217229
}
218230
setCoreKitStatus(coreKitInstance.status);
231+
setUserInformation();
219232
} catch (error: unknown) {
220233
console.error(error);
221234
} finally {
@@ -249,17 +262,23 @@ function App() {
249262

250263
await coreKitInstance.loginWithOAuth(verifierConfig);
251264
// IMP END - Login
252-
setCoreKitStatus(coreKitInstance.status);
253265
if (coreKitInstance.status === COREKIT_STATUS.LOGGED_IN) {
254266
await coreKitInstance.commitChanges(); // Needed for new accounts
255267
}
268+
setCoreKitStatus(coreKitInstance.status);
269+
setUserInformation();
256270
} catch (error: unknown) {
257271
uiConsole(error);
258272
} finally {
259273
setIsLoading(false);
260274
}
261275
};
262276

277+
const setUserInformation = () => {
278+
const userInfo = coreKitInstance.getUserInfo();
279+
setUserInfo(userInfo);
280+
getShareDescriptions();
281+
}
263282
return (
264283
<div className="container bg-app-gray-100 dark:bg-app-gray-900">
265284
{isLoading ? (
@@ -274,7 +293,9 @@ function App() {
274293
coreKitStatus === COREKIT_STATUS.LOGGED_IN ? (
275294
<HomePage />
276295
) : (
277-
<LoginCard handleEmailPasswordLess={loginWithAuth0EmailPasswordless} handleSocialLogin={login} />
296+
<>
297+
<LoginCard handleEmailPasswordLess={loginWithAuth0EmailPasswordless} handleSocialLogin={login} />
298+
</>
278299
)
279300
}
280301
</>

‎demo/redirect-flow-example/src/serviceWorkerRegistration.ts‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
// This optional code is used to register a service worker.
2+
// register() is not called by default.
3+
4+
// This lets the app load faster on subsequent visits in production, and gives
5+
// it offline capabilities. However, it also means that developers (and users)
6+
// will only see deployed updates on subsequent visits to a page, after all the
7+
// existing tabs open on the page have been closed, since previously cached
8+
// resources are updated in the background.
9+
10+
// To learn more about the benefits of this model and instructions on how to
11+
// opt-in, read https://cra.link/PWA
12+
13+
const isLocalhost = Boolean(
14+
window.location.hostname === 'localhost' ||
15+
// [::1] is the IPv6 localhost address.
16+
window.location.hostname === '[::1]' ||
17+
// 127.0.0.0/8 are considered localhost for IPv4.
18+
window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/)
19+
);
20+
21+
type Config = {
22+
onSuccess?: (registration: ServiceWorkerRegistration) => void;
23+
onUpdate?: (registration: ServiceWorkerRegistration) => void;
24+
};
25+
26+
export function register(config?: Config) {
27+
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
28+
// The URL constructor is available in all browsers that support SW.
29+
const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
30+
if (publicUrl.origin !== window.location.origin) {
31+
// Our service worker won't work if PUBLIC_URL is on a different origin
32+
// from what our page is served on. This might happen if a CDN is used to
33+
// serve assets; see https://github.com/facebook/create-react-app/issues/2374
34+
return;
35+
}
36+
37+
window.addEventListener('load', () => {
38+
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
39+
40+
if (isLocalhost) {
41+
// This is running on localhost. Let's check if a service worker still exists or not.
42+
checkValidServiceWorker(swUrl, config);
43+
44+
// Add some additional logging to localhost, pointing developers to the
45+
// service worker/PWA documentation.
46+
navigator.serviceWorker.ready.then(() => {
47+
console.log(
48+
'This web app is being served cache-first by a service ' +
49+
'worker. To learn more, visit https://cra.link/PWA'
50+
);
51+
});
52+
} else {
53+
// Is not localhost. Just register service worker
54+
registerValidSW(swUrl, config);
55+
}
56+
});
57+
}
58+
}
59+
60+
function registerValidSW(swUrl: string, config?: Config) {
61+
navigator.serviceWorker
62+
.register(swUrl)
63+
.then((registration) => {
64+
registration.onupdatefound = () => {
65+
const installingWorker = registration.installing;
66+
if (installingWorker == null) {
67+
return;
68+
}
69+
installingWorker.onstatechange = () => {
70+
if (installingWorker.state === 'installed') {
71+
if (navigator.serviceWorker.controller) {
72+
// At this point, the updated precached content has been fetched,
73+
// but the previous service worker will still serve the older
74+
// content until all client tabs are closed.
75+
console.log(
76+
'New content is available and will be used when all ' +
77+
'tabs for this page are closed. See https://cra.link/PWA.'
78+
);
79+
80+
// Execute callback
81+
if (config && config.onUpdate) {
82+
config.onUpdate(registration);
83+
}
84+
} else {
85+
// At this point, everything has been precached.
86+
// It's the perfect time to display a
87+
// "Content is cached for offline use." message.
88+
console.log('Content is cached for offline use.');
89+
90+
// Execute callback
91+
if (config && config.onSuccess) {
92+
config.onSuccess(registration);
93+
}
94+
}
95+
}
96+
};
97+
};
98+
})
99+
.catch((error) => {
100+
console.error('Error during service worker registration:', error);
101+
});
102+
}
103+
104+
function checkValidServiceWorker(swUrl: string, config?: Config) {
105+
// Check if the service worker can be found. If it can't reload the page.
106+
fetch(swUrl, {
107+
headers: { 'Service-Worker': 'script' },
108+
})
109+
.then((response) => {
110+
// Ensure service worker exists, and that we really are getting a JS file.
111+
const contentType = response.headers.get('content-type');
112+
if (
113+
response.status === 404 ||
114+
(contentType != null && contentType.indexOf('javascript') === -1)
115+
) {
116+
// No service worker found. Probably a different app. Reload the page.
117+
navigator.serviceWorker.ready.then((registration) => {
118+
registration.unregister().then(() => {
119+
window.location.reload();
120+
});
121+
});
122+
} else {
123+
// Service worker found. Proceed as normal.
124+
registerValidSW(swUrl, config);
125+
}
126+
})
127+
.catch(() => {
128+
console.log('No internet connection found. App is running in offline mode.');
129+
});
130+
}
131+
132+
export function unregister() {
133+
if ('serviceWorker' in navigator) {
134+
navigator.serviceWorker.ready
135+
.then((registration) => {
136+
registration.unregister();
137+
})
138+
.catch((error) => {
139+
console.error(error.message);
140+
});
141+
}
142+
}

0 commit comments

Comments
 (0)