Skip to content

Commit 3da99c7

Browse files
gregfromstlgregfromstl
committed
wip: only auto login SIWE when using a url to login
1 parent c2acfd1 commit 3da99c7

File tree

18 files changed

+251
-224
lines changed

18 files changed

+251
-224
lines changed

‎packages/thirdweb/src/auth/core/sign-and-login.ts‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import type { SiweAuthOptions } from "./types.js";
2+
import type { Account, Wallet } from "../../wallets/interfaces/wallet.js";
3+
import { getCachedChain } from "../../chains/utils.js";
4+
5+
export async function signAndLogin(params: {
6+
activeWallet: Wallet;
7+
activeAccount: Account;
8+
authOptions: SiweAuthOptions;
9+
}) {
10+
const { activeWallet, activeAccount, authOptions } = params;
11+
12+
const chain = activeWallet.getChain();
13+
if (!chain) {
14+
throw new Error("No active chain");
15+
}
16+
17+
const [payload, { signLoginPayload }] = await Promise.all([
18+
authOptions.getLoginPayload({
19+
address: activeAccount.address,
20+
chainId: chain.id,
21+
}),
22+
// we lazy-load this because it's only needed when logging in
23+
import("./sign-login-payload.js"),
24+
]);
25+
26+
if (payload.chain_id) {
27+
await activeWallet.switchChain(getCachedChain(Number(payload.chain_id)));
28+
}
29+
30+
const signedPayload = await signLoginPayload({
31+
payload,
32+
account: activeAccount,
33+
});
34+
35+
return await authOptions.doLogin(signedPayload);
36+
}

‎packages/thirdweb/src/auth/core/types.ts‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import type { ThirdwebClient } from "../../client/client.js";
22
import type { Account } from "../../wallets/interfaces/wallet.js";
3+
import type { VerifyLoginPayloadParams } from "./verify-login-payload.js";
34

45
/**
6+
* Options for creating an Auth instance
57
* @auth
68
*/
79
export type AuthOptions = {
@@ -44,3 +46,43 @@ export type LoginPayload = {
4446
invalid_before: string;
4547
resources?: string[];
4648
};
49+
50+
/**
51+
* Options for Setting up SIWE (Sign in with Ethereum) Authentication
52+
* @auth
53+
*/
54+
export type SiweAuthOptions = {
55+
// we pass address and chainId and retrieve a login payload (we do not care how)
56+
57+
/**
58+
* Method to get the login payload for given address and chainId
59+
* @param params - The parameters to get the login payload for.
60+
*/
61+
getLoginPayload: (params: {
62+
address: string;
63+
chainId: number;
64+
}) => Promise<LoginPayload>;
65+
66+
// we pass the login payload and signature and the developer passes this to the auth server however they want
67+
68+
/**
69+
* Method to login with the signed login payload
70+
* @param params
71+
*/
72+
doLogin: (params: VerifyLoginPayloadParams) => Promise<void>;
73+
74+
// we call this internally when a user explicitly disconnects their wallet
75+
76+
/**
77+
* Method to logout the user
78+
*/
79+
doLogout: () => Promise<void>;
80+
81+
// the developer specifies how to check if the user is logged in, this is called internally by the component
82+
83+
/**
84+
* Method to check if the user is logged in or not
85+
* @param address
86+
*/
87+
isLoggedIn: (address: string) => Promise<boolean>;
88+
};

‎packages/thirdweb/src/exports/auth.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,11 @@ export type {
2121
VerifyLoginPayloadResult,
2222
} from "../auth/core/verify-login-payload.js";
2323
export type { GenerateLoginPayloadParams } from "../auth/core/generate-login-payload.js";
24-
export type { AuthOptions, LoginPayload } from "../auth/core/types.js";
24+
export type {
25+
AuthOptions,
26+
LoginPayload,
27+
SiweAuthOptions,
28+
} from "../auth/core/types.js";
2529

2630
// meant to be used on the "client" side to sign the login payload with a given account
2731
export {

‎packages/thirdweb/src/exports/react.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -123,8 +123,8 @@ export {
123123
export { AutoConnect } from "../react/web/ui/AutoConnect/AutoConnect.js";
124124
export type { AutoConnectProps } from "../wallets/connection/types.js";
125125

126-
// auth
127-
export type { SiweAuthOptions } from "../react/core/hooks/auth/useSiweAuth.js";
126+
// auth - its in core but must export from here to avoid breaking changes
127+
export type { SiweAuthOptions } from "../auth/core/types.js";
128128

129129
export {
130130
PayEmbed,

‎packages/thirdweb/src/react/core/hooks/auth/useSiweAuth.ts‎

Lines changed: 6 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,7 @@
11
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
2-
import type { LoginPayload } from "../../../../auth/core/types.js";
3-
import type { VerifyLoginPayloadParams } from "../../../../auth/core/verify-login-payload.js";
4-
import { getCachedChain } from "../../../../chains/utils.js";
52
import type { Account, Wallet } from "../../../../wallets/interfaces/wallet.js";
6-
7-
/**
8-
* Options for Setting up SIWE (Sign in with Ethereum) Authentication
9-
* @auth
10-
*/
11-
export type SiweAuthOptions = {
12-
// we pass address and chainId and retrieve a login payload (we do not care how)
13-
14-
/**
15-
* Method to get the login payload for given address and chainId
16-
* @param params - The parameters to get the login payload for.
17-
*/
18-
getLoginPayload: (params: {
19-
address: string;
20-
chainId: number;
21-
}) => Promise<LoginPayload>;
22-
23-
// we pass the login payload and signature and the developer passes this to the auth server however they want
24-
25-
/**
26-
* Method to login with the signed login payload
27-
* @param params
28-
*/
29-
doLogin: (params: VerifyLoginPayloadParams) => Promise<void>;
30-
31-
// we call this internally when a user explicitly disconnects their wallet
32-
33-
/**
34-
* Method to logout the user
35-
*/
36-
doLogout: () => Promise<void>;
37-
38-
// the developer specifies how to check if the user is logged in, this is called internally by the component
39-
40-
/**
41-
* Method to check if the user is logged in or not
42-
* @param address
43-
*/
44-
isLoggedIn: (address: string) => Promise<boolean>;
45-
};
3+
import { signAndLogin } from "../../../../auth/core/sign-and-login.js";
4+
import type { SiweAuthOptions } from "../../../../auth/core/types.js";
465

476
/**
487
* @internal
@@ -81,34 +40,15 @@ export function useSiweAuth(
8140
if (!activeWallet) {
8241
throw new Error("No active wallet");
8342
}
84-
const chain = activeWallet.getChain();
85-
if (!chain) {
86-
throw new Error("No active chain");
87-
}
8843
if (!activeAccount) {
8944
throw new Error("No active account");
9045
}
91-
const [payload, { signLoginPayload }] = await Promise.all([
92-
authOptions.getLoginPayload({
93-
address: activeAccount.address,
94-
chainId: chain.id,
95-
}),
96-
// we lazy-load this because it's only needed when logging in
97-
import("../../../../auth/core/sign-login-payload.js"),
98-
]);
9946

100-
if (payload.chain_id) {
101-
await activeWallet.switchChain(
102-
getCachedChain(Number(payload.chain_id)),
103-
);
104-
}
105-
106-
const signedPayload = await signLoginPayload({
107-
payload,
108-
account: activeAccount,
47+
await signAndLogin({
48+
activeWallet,
49+
activeAccount,
50+
authOptions,
10951
});
110-
111-
return await authOptions.doLogin(signedPayload);
11252
},
11353
onSuccess: () => {
11454
return queryClient.invalidateQueries({

‎packages/thirdweb/src/react/core/hooks/connection/ConnectButtonProps.ts‎

Lines changed: 37 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,12 @@ import type { CurrencyMeta } from "../../../web/ui/ConnectWallet/screens/Buy/fia
1818
import type { WelcomeScreen } from "../../../web/ui/ConnectWallet/screens/types.js";
1919
import type { LocaleId } from "../../../web/ui/types.js";
2020
import type { Theme } from "../../design-system/index.js";
21+
import type { SiweAuthOptions } from "../../../../auth/core/types.js";
2122
import type {
2223
SupportedNFTs,
2324
SupportedTokens,
2425
TokenInfo,
2526
} from "../../utils/defaultTokens.js";
26-
import type { SiweAuthOptions } from "../auth/useSiweAuth.js";
2727

2828
export type PaymentInfo = {
2929
/**
@@ -44,21 +44,21 @@ export type PaymentInfo = {
4444
*/
4545
feePayer?: "sender" | "receiver";
4646
} & (
47-
| {
47+
| {
4848
/**
4949
* The amount of tokens to receive in ETH or tokens.
5050
* ex: 0.1 ETH or 100 USDC
5151
*/
5252
amount: string;
5353
}
54-
| {
54+
| {
5555
/**
5656
* The amount of tokens to receive in wei.
5757
* ex: 1000000000000000000 wei
5858
*/
5959
amountWei: bigint;
6060
}
61-
);
61+
);
6262

6363
export type PayUIOptions = Prettify<
6464
{
@@ -73,33 +73,33 @@ export type PayUIOptions = Prettify<
7373
* For example, if you want to allow selecting chain and but disable selecting token, you can set `allowEdits` to `{ token: false, chain: true }`
7474
*/
7575
buyWithCrypto?:
76-
| false
77-
| {
78-
testMode?: boolean;
79-
prefillSource?: {
80-
chain: Chain;
81-
token?: TokenInfo;
82-
allowEdits?: {
83-
token: boolean;
84-
chain: boolean;
85-
};
86-
};
76+
| false
77+
| {
78+
testMode?: boolean;
79+
prefillSource?: {
80+
chain: Chain;
81+
token?: TokenInfo;
82+
allowEdits?: {
83+
token: boolean;
84+
chain: boolean;
8785
};
86+
};
87+
};
8888

8989
/**
9090
* By default "Credit card" option is enabled. you can disable it by setting `buyWithFiat` to `false`
9191
*
9292
* You can also enable the test mode for the on-ramp provider to test on-ramp without using real credit card.
9393
*/
9494
buyWithFiat?:
95-
| {
96-
testMode?: boolean;
97-
prefillSource?: {
98-
currency?: CurrencyMeta["shorthand"];
99-
};
100-
preferredProvider?: FiatProvider;
101-
}
102-
| false;
95+
| {
96+
testMode?: boolean;
97+
prefillSource?: {
98+
currency?: CurrencyMeta["shorthand"];
99+
};
100+
preferredProvider?: FiatProvider;
101+
}
102+
| false;
103103

104104
/**
105105
* Extra details to store with the purchase.
@@ -114,18 +114,18 @@ export type PayUIOptions = Prettify<
114114
onPurchaseSuccess?: (
115115
info:
116116
| {
117-
type: "crypto";
118-
status: BuyWithCryptoStatus;
119-
}
117+
type: "crypto";
118+
status: BuyWithCryptoStatus;
119+
}
120120
| {
121-
type: "fiat";
122-
status: BuyWithFiatStatus;
123-
}
121+
type: "fiat";
122+
status: BuyWithFiatStatus;
123+
}
124124
| {
125-
type: "transaction";
126-
chainId: number;
127-
transactionHash: Hex;
128-
},
125+
type: "transaction";
126+
chainId: number;
127+
transactionHash: Hex;
128+
},
129129
) => void;
130130
/**
131131
* Customize the display of the PayEmbed UI.
@@ -638,10 +638,10 @@ export type ConnectButtonProps = {
638638
* ```
639639
*/
640640
autoConnect?:
641-
| {
642-
timeout: number;
643-
}
644-
| boolean;
641+
| {
642+
timeout: number;
643+
}
644+
| boolean;
645645

646646
/**
647647
* Metadata of the app that will be passed to connected wallet. Setting this is highly recommended.

‎packages/thirdweb/src/react/core/hooks/connection/ConnectEmbedProps.ts‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import type { AppMetadata } from "../../../../wallets/types.js";
66
import type { WelcomeScreen } from "../../../web/ui/ConnectWallet/screens/types.js";
77
import type { LocaleId } from "../../../web/ui/types.js";
88
import type { Theme } from "../../design-system/index.js";
9-
import type { SiweAuthOptions } from "../auth/useSiweAuth.js";
9+
import type { SiweAuthOptions } from "../../../../auth/core/types.js";
1010

1111
export type ConnectEmbedProps = {
1212
/**
@@ -104,10 +104,10 @@ export type ConnectEmbedProps = {
104104
* ```
105105
*/
106106
autoConnect?:
107-
| {
108-
timeout: number;
109-
}
110-
| boolean;
107+
| {
108+
timeout: number;
109+
}
110+
| boolean;
111111

112112
/**
113113
* The [`Chain`](https://portal.thirdweb.com/references/typescript/v5/Chain) object of the blockchain you want the wallet to connect to
@@ -323,9 +323,9 @@ export type ConnectEmbedProps = {
323323
* Set it to `true` to show the default title and icon
324324
*/
325325
header?:
326-
| {
327-
title?: string;
328-
titleIcon?: string;
329-
}
330-
| true;
326+
| {
327+
title?: string;
328+
titleIcon?: string;
329+
}
330+
| true;
331331
};

0 commit comments

Comments
 (0)