Skip to content

Test branch for OAuth scopes #145

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Test branch for OAuth scopes #145

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ac2fa25
Test branch for OAuth scopes
chris-stytch Mar 23, 2023
449dbf8
remove some recipes
chris-stytch Mar 23, 2023
38b2abb
Simplify profile
chris-stytch Mar 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 3 additions & 6 deletions components/LoginWithStytchSDKUI.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,9 @@ const sdkConfig: StytchLoginConfig = {
},
oauthOptions: {
providers: [
{ type: OAuthProviders.Google, one_tap: true, position: OneTapPositions.embedded },
{ type: OAuthProviders.Apple },
{ type: OAuthProviders.Microsoft },
{ type: OAuthProviders.Facebook },
{ type: OAuthProviders.Github },
{ type: OAuthProviders.GitLab },
{ type: OAuthProviders.Github, custom_scopes: ['project', 'user'] },
{ type: OAuthProviders.GitLab, custom_scopes: ['api'] },
{ type: OAuthProviders.Bitbucket, custom_scopes: ['repository'] },
],
loginRedirectURL: getDomainFromWindow() + '/authenticate',
signupRedirectURL: getDomainFromWindow() + '/authenticate',
Expand Down
268 changes: 133 additions & 135 deletions lib/recipeData.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,159 +29,157 @@ export const Recipes: Record<string, LoginType> = {
},
oauthOptions: {
providers: [
{ type: OAuthProviders.Google, one_tap: true, position: OneTapPositions.embedded },
{ type: OAuthProviders.Apple },
{ type: OAuthProviders.Microsoft },
{ type: OAuthProviders.Facebook },
{ type: OAuthProviders.Github },
{ type: OAuthProviders.GitLab },
{ type: OAuthProviders.Github, custom_scopes: ['project', 'user'] },
{ type: OAuthProviders.GitLab, custom_scopes: ['api'] },
{ type: OAuthProviders.Bitbucket, custom_scopes: ['repository'] },
],
loginRedirectURL: getDomainFromWindow() + '/authenticate',
signupRedirectURL: getDomainFromWindow() + '/authenticate',
},
};

const LoginWithStytchSDKUI = () => <StytchLogin config={sdkConfig} styles={sdkStyle} callbacks={callbackConfig} />;`,
},
CUSTOM_UI_HEADLESS: {
id: 'sdk-sms',
title: 'Custom UI + JavaScript SDK',
details: `In this example you can see what a typical SMS passcodes (OTP) login flow might look like; here we've built a custom phone number entry and passcode input UI that leverages our JavaScript SDK to handle the heavy lifting.`,
description: `This gives you full control over the user experience while minimizing backend code and session logic by using our SDK.`,
instructions: `To the right you'll see a phone number entry form built within this example app itself, not using our pre-built UI. Below you can see the two simple SDK calls to send the SMS passcode and authenticate the passcode input by the user.`,
component: <LoginWithSMS />,
products: [LoginProducts.SMS],
code: `
// Send the SMS passcode
await stytchClient.otps.sms.loginOrCreate('+1' + phoneNumber);
// CUSTOM_UI_HEADLESS: {
// id: 'sdk-sms',
// title: 'Custom UI + JavaScript SDK',
// details: `In this example you can see what a typical SMS passcodes (OTP) login flow might look like; here we've built a custom phone number entry and passcode input UI that leverages our JavaScript SDK to handle the heavy lifting.`,
// description: `This gives you full control over the user experience while minimizing backend code and session logic by using our SDK.`,
// instructions: `To the right you'll see a phone number entry form built within this example app itself, not using our pre-built UI. Below you can see the two simple SDK calls to send the SMS passcode and authenticate the passcode input by the user.`,
// component: <LoginWithSMS />,
// products: [LoginProducts.SMS],
// code: `
// // Send the SMS passcode
// await stytchClient.otps.sms.loginOrCreate('+1' + phoneNumber);

// Verify the passcode input by the user
await stytchClient.otps.authenticate(
otpInput,
methodId,
{ session_duration_minutes: 30 }
);
`,
},
CUSTOM_UI_API: {
id: 'api-webauthn',
title: 'Custom UI + API integration',
details:
'For developers that want full control over the entire experience, you can interact directly with the Stytch API in your backend.',
description: `In this example we use custom UI elements and backend API logic to implement a two factor authentication flow with Email magic links as the primary factor and WebAuthn as the secondary factor.`,
instructions: `To the right you'll see an email address entry form built within this example app, not using our pre-built UI. You'll start off the flow by using Email magic links as a primary factor, then you'll be prompted to register and authenticate via WebAuthn as a second factor in a multi factor authentication flow.`,
component: <LoginWithEmailWebAuthn />,
products: [LoginProducts.EML, LoginProducts.WEBAUTHN],
code: `// Send the Email magic link
await stytchClient.magicLinks.email.loginOrCreate({
email: data.email,
login_magic_link_url: REDIRECT_URL_BASE + '/api/authenticate_magic_link_with_webauthn',
signup_magic_link_url: REDIRECT_URL_BASE + '/api/authenticate_magic_link_with_webauthn',
});
// // Verify the passcode input by the user
// await stytchClient.otps.authenticate(
// otpInput,
// methodId,
// { session_duration_minutes: 30 }
// );
// `,
// },
// CUSTOM_UI_API: {
// id: 'api-webauthn',
// title: 'Custom UI + API integration',
// details:
// 'For developers that want full control over the entire experience, you can interact directly with the Stytch API in your backend.',
// description: `In this example we use custom UI elements and backend API logic to implement a two factor authentication flow with Email magic links as the primary factor and WebAuthn as the secondary factor.`,
// instructions: `To the right you'll see an email address entry form built within this example app, not using our pre-built UI. You'll start off the flow by using Email magic links as a primary factor, then you'll be prompted to register and authenticate via WebAuthn as a second factor in a multi factor authentication flow.`,
// component: <LoginWithEmailWebAuthn />,
// products: [LoginProducts.EML, LoginProducts.WEBAUTHN],
// code: `// Send the Email magic link
// await stytchClient.magicLinks.email.loginOrCreate({
// email: data.email,
// login_magic_link_url: REDIRECT_URL_BASE + '/api/authenticate_magic_link_with_webauthn',
// signup_magic_link_url: REDIRECT_URL_BASE + '/api/authenticate_magic_link_with_webauthn',
// });

// Authenticate the Email magic link
await stytchClient.magicLinks.authenticate(token as string);`,
},
CRYPTO_WALLETS: {
id: 'sdk-crypto-wallets',
title: 'Web3 with Crypto wallets',
details:
'Our Web3 login products let you seamlessly weave crypto wallets into your traditional Web2 app or your latest Web3 project.',
description: `In this example you can link your Ethereum based wallet with Stytch with just a few clicks!`,
instructions: `To the right you'll see button to sign in with your wallet, once clicked your wallet will open a prompt to get started. Below you can see the four simple steps to authenticate an Ethereum wallet; fetch the address, generate a challenge, sign the challenge, validate the signature with Stytch.`,
component: <LoginWithCryptoWallets />,
products: [LoginProducts.WEB3],
code: `
const trigger = useCallback(async () => {
/* Request user's wallet address */
const [crypto_wallet_address] = await window.ethereum.request({
method: 'eth_requestAccounts',
});
// // Authenticate the Email magic link
// await stytchClient.magicLinks.authenticate(token as string);`,
// },
// CRYPTO_WALLETS: {
// id: 'sdk-crypto-wallets',
// title: 'Web3 with Crypto wallets',
// details:
// 'Our Web3 login products let you seamlessly weave crypto wallets into your traditional Web2 app or your latest Web3 project.',
// description: `In this example you can link your Ethereum based wallet with Stytch with just a few clicks!`,
// instructions: `To the right you'll see button to sign in with your wallet, once clicked your wallet will open a prompt to get started. Below you can see the four simple steps to authenticate an Ethereum wallet; fetch the address, generate a challenge, sign the challenge, validate the signature with Stytch.`,
// component: <LoginWithCryptoWallets />,
// products: [LoginProducts.WEB3],
// code: `
// const trigger = useCallback(async () => {
// /* Request user's wallet address */
// const [crypto_wallet_address] = await window.ethereum.request({
// method: 'eth_requestAccounts',
// });


/* Ask Stytch to generate a challenge for the user */
const { challenge } = await stytchClient.cryptoWallets.authenticateStart({
crypto_wallet_address,
crypto_wallet_type: 'ethereum',
});
// /* Ask Stytch to generate a challenge for the user */
// const { challenge } = await stytchClient.cryptoWallets.authenticateStart({
// crypto_wallet_address,
// crypto_wallet_type: 'ethereum',
// });

/* Ask the user's browser to sign the challenge */
const signature = await window.ethereum.request({
method: 'personal_sign',
params: [challenge, crypto_wallet_address],
});
// /* Ask the user's browser to sign the challenge */
// const signature = await window.ethereum.request({
// method: 'personal_sign',
// params: [challenge, crypto_wallet_address],
// });

/* Send the signature back to Stytch for validation */
await stytchClient.cryptoWallets.authenticate({
crypto_wallet_address,
crypto_wallet_type: 'ethereum',
signature,
session_duration_minutes: 60,
});
if (user) {
router.push('/profile');
}
}, [stytchClient]);
`,
},
PASSWORDS: {
id: 'passwords',
title: 'Passwords',
details:
'Build an email/password authentication experience including passwords resets, password strength checking, and magic links using prebuilt Stytch UI components.',
description: ``,
instructions: `To the right you'll see the Stytch UI configured for password login. Enter a new email address and you will be prompted to create an account with a secure password.`,
component: <LoginWithPasswords />,
products: [LoginProducts.PASSWORDS],
code: `const loginConfig: StytchLoginConfig = {
passwordOptions: {
loginExpirationMinutes: 30,
loginRedirectURL: getDomainFromWindow() + '/authenticate',
resetPasswordExpirationMinutes: 30,
resetPasswordRedirectURL: getDomainFromWindow() + '/recipes/passwords/reset',
},
sessionOptions: {
sessionDurationMinutes: 60 * 24,
},
products: [Products.passwords],
};
// /* Send the signature back to Stytch for validation */
// await stytchClient.cryptoWallets.authenticate({
// crypto_wallet_address,
// crypto_wallet_type: 'ethereum',
// signature,
// session_duration_minutes: 60,
// });
// if (user) {
// router.push('/profile');
// }
// }, [stytchClient]);
// `,
// },
// PASSWORDS: {
// id: 'passwords',
// title: 'Passwords',
// details:
// 'Build an email/password authentication experience including passwords resets, password strength checking, and magic links using prebuilt Stytch UI components.',
// description: ``,
// instructions: `To the right you'll see the Stytch UI configured for password login. Enter a new email address and you will be prompted to create an account with a secure password.`,
// component: <LoginWithPasswords />,
// products: [LoginProducts.PASSWORDS],
// code: `const loginConfig: StytchLoginConfig = {
// passwordOptions: {
// loginExpirationMinutes: 30,
// loginRedirectURL: getDomainFromWindow() + '/authenticate',
// resetPasswordExpirationMinutes: 30,
// resetPasswordRedirectURL: getDomainFromWindow() + '/recipes/passwords/reset',
// },
// sessionOptions: {
// sessionDurationMinutes: 60 * 24,
// },
// products: [Products.passwords],
// };

const LoginWithPasswords = () => {
const { user } = useStytchUser();
const router = useRouter();
// const LoginWithPasswords = () => {
// const { user } = useStytchUser();
// const router = useRouter();

if (user) {
router.push('/profile');
}
// if (user) {
// router.push('/profile');
// }

return <StytchLogin config={loginConfig} callbacks={callbackConfig} />;`,
},
ONETAP: {
id: 'onetap',
title: 'Floating Google One Tap',
details:
'Render Google One Tap in a floating manner on your webpages, and nudge users down the login/signup flow from anywhere in your user experience.',
description: `This authentication method can be used as a standalone login/signup method, or paired with other login methods such as email magic links.`,
instructions: `Google One Tap is powered through an iframe that Google provides compared to the traditional OAuth flow of redirecting the user to a separate Google page. As a result, the user can click directly on their desired account to login or create an account - hence, a “One Tap” experience. In the top right hand corner of this page you'll see the Stytch UI configured for Google One Tap if you have any active Chrome sessions in your browser.`,
component: <LoginWithOneTap />,
products: [LoginProducts.OAUTH],
code: `const sdkConfig: StytchLoginConfig = {
products: [Products.oauth],
oauthOptions: {
providers: [
{ type: OAuthProviders.Google, one_tap: true, position: OneTapPositions.floating },
],
loginRedirectURL: getDomainFromWindow() + '/authenticate',
signupRedirectURL: getDomainFromWindow() + '/authenticate',
},
};
// return <StytchLogin config={loginConfig} callbacks={callbackConfig} />;`,
// },
// ONETAP: {
// id: 'onetap',
// title: 'Floating Google One Tap',
// details:
// 'Render Google One Tap in a floating manner on your webpages, and nudge users down the login/signup flow from anywhere in your user experience.',
// description: `This authentication method can be used as a standalone login/signup method, or paired with other login methods such as email magic links.`,
// instructions: `Google One Tap is powered through an iframe that Google provides compared to the traditional OAuth flow of redirecting the user to a separate Google page. As a result, the user can click directly on their desired account to login or create an account - hence, a “One Tap” experience. In the top right hand corner of this page you'll see the Stytch UI configured for Google One Tap if you have any active Chrome sessions in your browser.`,
// component: <LoginWithOneTap />,
// products: [LoginProducts.OAUTH],
// code: `const sdkConfig: StytchLoginConfig = {
// products: [Products.oauth],
// oauthOptions: {
// providers: [
// { type: OAuthProviders.Google, one_tap: true, position: OneTapPositions.floating },
// ],
// loginRedirectURL: getDomainFromWindow() + '/authenticate',
// signupRedirectURL: getDomainFromWindow() + '/authenticate',
// },
// };

const callbackConfig = {
onEvent: (message: StytchEvent) => console.log(message),
onError: (error: StytchError) => console.log(error),
}
// const callbackConfig = {
// onEvent: (message: StytchEvent) => console.log(message),
// onError: (error: StytchError) => console.log(error),
// }

const LoginWithOneTap = () => <StytchLogin config={sdkConfig} callbacks={callbackConfig} />;`,
},
// const LoginWithOneTap = () => <StytchLogin config={sdkConfig} callbacks={callbackConfig} />;`,
// },
FEEDBACK: {
id: 'feedback',
title: 'Feedback',
Expand Down
4 changes: 3 additions & 1 deletion pages/profile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,9 @@ const Profile = () => {
</button>
</div>
<div style={styles.details}>
<SessionDemo />
<h2>Session details</h2>
<p>Below is your Stytch session object, look for the idp object for your IdP tokens (e.g. GitHub access token). </p>
<CodeBlock codeString={JSON.stringify(session, null, 2).replace(' ', '')} maxHeight="500px" />
</div>
</div>
);
Expand Down