Skip to content

Commit

Permalink
PR changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@ashWeaver-Stytch
ashWeaver-Stytch committed May 6, 2024
1 parent 4eb797b commit 9df2f48
Show file tree
Hide file tree
Showing 8 changed files with 55 additions and 61 deletions.
7 changes: 6 additions & 1 deletion components/EmailSMS/LoginWithEmail.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,11 @@ const STATUS = {
ERROR: 2,
};

const auth_domain = {
login: '/recipes/api-sms-mfa/magic-link-authenticate',
signup: '/recipes/api-sms-mfa/magic-link-authenticate'
}

const LoginWithSMSMFA = () => {
const [emlSent, setEMLSent] = useState(STATUS.INIT);
const [email, setEmail] = useState('');
Expand Down Expand Up @@ -38,7 +43,7 @@ const LoginWithSMSMFA = () => {
}

if (isValidEmail(email)) {
const resp = await sendEML(email, '/recipes/api-sms-mfa/magic-link-authenticate', '/recipes/api-sms-mfa/magic-link-authenticate');
const resp = await sendEML(email, auth_domain.login, auth_domain.signup);
if (resp.status === 200) {
setEMLSent(STATUS.SENT);
} else {
Expand Down
7 changes: 6 additions & 1 deletion components/EmailWebAuthn/LoginWithEmail.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,11 @@ const STATUS = {
ERROR: 2,
};

const auth_domain = {
login: '/recipes/api-webauthn/magic-link-authenticate',
signup: '/recipes/api-webauthn/magic-link-authenticate'
}

const LoginWithEmail = () => {
const [emlSent, setEMLSent] = useState(STATUS.INIT);
const [email, setEmail] = useState('');
Expand Down Expand Up @@ -37,7 +42,7 @@ const LoginWithEmail = () => {
}

if (isValidEmail(email)) {
const resp = await sendEML(email, '/recipes/api-webauthn/magic-link-authenticate', '/recipes/api-webauthn/magic-link-authenticate');
const resp = await sendEML(email, auth_domain.login, auth_domain.signup);
if (resp.status === 200) {
setEMLSent(STATUS.SENT);
} else {
Expand Down
2 changes: 1 addition & 1 deletion components/LoginWithStytchSDKUI.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const sdkConfig: StytchLoginConfig = {
},
oauthOptions: {
providers: [
{ type: OAuthProviders.Google, one_tap: true, position: 'forceLegacyEmbedded' },
{ type: OAuthProviders.Google, one_tap: true},
{ type: OAuthProviders.Apple },
{ type: OAuthProviders.Microsoft },
{ type: OAuthProviders.Facebook },
Expand Down
5 changes: 1 addition & 4 deletions lib/emlUtils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,4 @@ export const sendEML = async (email: string, signup_redirect: string, login_redi
signup_redirect,
login_redirect,
}),
});



});
6 changes: 3 additions & 3 deletions lib/recipeData.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -215,14 +215,14 @@ const LoginWithOneTap = () => <StytchLogin config={sdkConfig} callbacks={callbac
},
SMS_MFA: {
id: 'smsmfa',
title: 'Headless SDK + SMS MFA',
title: 'SMS MFA',
details:
'For developers that want full control over the user experience while minimizing backend code and session logic, you can interact directly with Stytch’s Headless SDK and API’s. ',
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 SMS OTP as the secondary factor.`,
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 SMS OTP 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 SMS OTP as a second factor in a multi factor authentication flow.`,
component: <LoginWithSMSMFA />,
products: [LoginProducts.EML, LoginProducts.SMS],
code: `// Send the Email magic link
code: `// Send the email magic link
await stytchClient.magicLinks.email.loginOrCreate({
email: data.email,
login_magic_link_url: REDIRECT_URL_BASE + '/api-sms-mfa/magic-link-authenticate',
Expand Down
4 changes: 1 addition & 3 deletions pages/api/authenticate_otp.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,6 @@ export async function handler(req: NextApiRequest, res: NextApiResponse<ErrorDat
const data = JSON.parse(req.body);

try {
const domain = getDomainFromRequest(req);

const { session_token } = await stytchClient.otps.authenticate({
method_id: data.method_id,
code: data.otp_code,
Expand All @@ -39,7 +37,7 @@ export async function handler(req: NextApiRequest, res: NextApiResponse<ErrorDat
return res.status(400).json({ errorString });
}
} else {
// Handle any other HTTP method
return res.status(405).json({ errorString: 'Method Not Allowed' });
}
}

Expand Down
2 changes: 0 additions & 2 deletions pages/api/send_otp.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,6 @@ export async function handler(req: NextApiRequest, res: NextApiResponse<Data | E
return res.status(400).json({ errorString: 'Phone number is missing in the request body' });
}

// const domain = getDomainFromRequest(req);
// Send OTP via Stytch SMS
const authResp = await stytchClient.otps.sms.send({
phone_number: data.phoneNumber,
expiration_minutes: 10,
Expand Down
83 changes: 37 additions & 46 deletions pages/recipes/api-sms-mfa/profile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,61 +41,52 @@ const Profile = ({ error, user, session, hasRegisteredPhone, superSecretData, ph
} catch {}
};

const handleRegister = (e: any) => {
e.preventDefault();
router.push('./sms-register');
};

// Set phoneNumber with optional chaining to handle potential undefined
const phoneNumberToShow = phoneNumber ?? '';
// Check if there is no user, if so, render <></>
if (!user) {
return <></>;
}

// Render the rest of the JSX (if there is a user)
return (
<div>
{!user ? (
<div />
) : (
<div style={styles2.container}>
<div style={styles2.details}>
<h2>Welcome to your profile!</h2>

<div style={styles2.secretBox}>
<h3>Super secret area</h3>
{superSecretData ? (
<p>{superSecretData}</p>
<div style={styles.container}>
<div style={styles.details}>
<h2>Welcome to your profile!</h2>

<div style={styles.secretBox}>
<h3>Super secret area</h3>
{superSecretData ? (
<p>{superSecretData}</p>
) : (
<>
<Image alt="Lock" src={lock} width={100} />
<p>
Super secret profile information is secured by two factor authentication. To unlock this area complete
the SMS OTP flow.
</p>
{hasRegisteredPhone && phoneNumber ? (
<SMSOTPButton phoneNumber={phoneNumber} />
) : (
<>
<Image alt="Lock" src={lock} width={100} />
<p>
Super secret profile information is secured by two factor authentication. To unlock this area
complete the SMS OTP flow.
</p>
{ (hasRegisteredPhone && phoneNumberToShow) ? (
<SMSOTPButton phoneNumber={phoneNumberToShow} />
) : (

<SMSRegister/>
)}
</>
<SMSRegister />
)}
</div>

<button onClick={signOut}>Sign out</button>
</div>
<div style={styles2.details}>
<h2>Stytch objects</h2>

<h3>Session</h3>
<CodeBlock codeString={JSON.stringify(session, null, 2).replace(' ', '')} />
<h3>User</h3>
<CodeBlock codeString={JSON.stringify(user, null, 2).replace(' ', '')} />
</div>
</>
)}
</div>
)}

<button onClick={signOut}>Sign out</button>
</div>
<div style={styles.details}>
<h2>Stytch objects</h2>

<h3>Session</h3>
<CodeBlock codeString={JSON.stringify(session, null, 2).replace(' ', '')} />
<h3>User</h3>
<CodeBlock codeString={JSON.stringify(user, null, 2).replace(' ', '')} />
</div>
</div>
);
};

const styles2: Record<string, React.CSSProperties> = {
const styles: Record<string, React.CSSProperties> = {
container: {
display: 'flex',
margin: '48px 24px',
Expand Down

0 comments on commit 9df2f48

Please sign in to comment.