diff --git a/components/EmailSMS/LoginWithEmail.tsx b/components/EmailSMS/LoginWithEmail.tsx index 8aba179..482d552 100644 --- a/components/EmailSMS/LoginWithEmail.tsx +++ b/components/EmailSMS/LoginWithEmail.tsx @@ -7,29 +7,22 @@ const STATUS = { ERROR: 2, }; -const auth_domain = { - login: '/recipes/api-sms-mfa/magic-link-authenticate', - signup: '/recipes/api-sms-mfa/magic-link-authenticate' -} +const EML_REDIRECT = '/recipes/api-sms-mfa/magic-link-authenticate'; const LoginWithSMSMFA = () => { const [emlSent, setEMLSent] = useState(STATUS.INIT); const [email, setEmail] = useState(''); const [isDisabled, setIsDisabled] = useState(true); - const path = "webauthn"; const isValidEmail = (emailValue: string) => { + // Overly simple email address regex const regex = /\S+@\S+\.\S+/; return regex.test(emailValue); }; const onEmailChange: ChangeEventHandler = (e) => { setEmail(e.target.value); - if (isValidEmail(e.target.value)) { - setIsDisabled(false); - } else { - setIsDisabled(true); - } + setIsDisabled(!isValidEmail(e.target.value)); }; const onSubmit: FormEventHandler = async (e) => { @@ -37,12 +30,11 @@ const LoginWithSMSMFA = () => { // Disable button right away to prevent sending emails twice if (isDisabled) { return; - } else { - setIsDisabled(true); } + setIsDisabled(true); if (isValidEmail(email)) { - const resp = await sendEML(email, auth_domain.login, auth_domain.signup); + const resp = await sendEML(email, EML_REDIRECT, EML_REDIRECT); if (resp.status === 200) { setEMLSent(STATUS.SENT); } else { diff --git a/components/EmailSMS/SMSOTPButton.tsx b/components/EmailSMS/SMSOTPButton.tsx index 1802cb5..e011ec6 100644 --- a/components/EmailSMS/SMSOTPButton.tsx +++ b/components/EmailSMS/SMSOTPButton.tsx @@ -1,6 +1,5 @@ import React, { useState } from 'react'; import { sendOTP, authOTP } from '../../lib/otpUtils'; -import * as webauthnJson from '@github/webauthn-json'; import { useRouter } from 'next/router'; interface SMSOTPButtonProps { @@ -18,14 +17,15 @@ function formatPhoneNumber(phoneNumber: string): string { function SMSOTPButton({ phoneNumber }: SMSOTPButtonProps) { const router = useRouter(); - const [openModal, setOpenModal] = useState(false); - const [otp, setOTP] = useState(''); - const [methodId, setMethodId] = useState(''); + const [openModal, setOpenModal] = useState(false); // State variable to control the modal visibility + const [otp, setOTP] = useState(''); // State variable to store the OTP input by the user + const [methodId, setMethodId] = useState(''); // State variable to store the method ID const authenticate = async () => { try { const response = await sendOTP(phoneNumber); + // Check if response is empty if (!response) { console.error('Empty response received from sendOTP'); return; @@ -34,33 +34,47 @@ function SMSOTPButton({ phoneNumber }: SMSOTPButtonProps) { const responseData = await response; setMethodId(responseData.phone_id); + // Set state to open the modal setOpenModal(true); } catch (error) { + // Handle errors here, e.g., display an error message console.error('Failed to send OTP:', error); } }; const handleModalClose = () => { + // Clear OTP input and close the modal setOTP(''); setOpenModal(false); }; const handleOTPSubmit = async () => { try { + // Call the authOTP function with methodID and otp + console.log('METHOD', methodId); await authOTP(methodId, otp); + + // Redirect to profile page router.push('./profile'); } catch (error) { + // Handle errors here, e.g., display an error message console.error('Failed to authenticate OTP:', error); } }; + const handleResend = (e: React.MouseEvent) => { + e.preventDefault(); + authenticate(); + }; + return (
+ {/* Modal for OTP input */} {openModal && (
@@ -77,7 +91,7 @@ function SMSOTPButton({ phoneNumber }: SMSOTPButtonProps) { placeholder="Enter OTP" />

- Didn't receive a code? { e.preventDefault(); authenticate(); }}>Resend + Didn't receive a code? Resend

@@ -87,7 +101,6 @@ function SMSOTPButton({ phoneNumber }: SMSOTPButtonProps) { ); } - const styles: Record = { modalOverlay: { position: 'fixed', diff --git a/components/EmailSMS/SMSRegister.tsx b/components/EmailSMS/SMSRegister.tsx index b8827dc..1cbbac7 100644 --- a/components/EmailSMS/SMSRegister.tsx +++ b/components/EmailSMS/SMSRegister.tsx @@ -52,9 +52,7 @@ function SMSRegister() { } const responseData = await response; - console.log('Response data from sendOTP:', responseData); setMethodId(responseData.phone_id); - console.log('Method id', responseData.phone_id); setOpenModalPhone(false); setOpenModal(true); diff --git a/components/EmailWebAuthn/LoginWithEmail.tsx b/components/EmailWebAuthn/LoginWithEmail.tsx index 04d323f..4afaf1d 100644 --- a/components/EmailWebAuthn/LoginWithEmail.tsx +++ b/components/EmailWebAuthn/LoginWithEmail.tsx @@ -7,10 +7,7 @@ const STATUS = { ERROR: 2, }; -const auth_domain = { - login: '/recipes/api-webauthn/magic-link-authenticate', - signup: '/recipes/api-webauthn/magic-link-authenticate' -} +const EML_REDIRECT = "/recipes/api-webauthn/magic-link-authenticate"; const LoginWithEmail = () => { const [emlSent, setEMLSent] = useState(STATUS.INIT); @@ -42,7 +39,7 @@ const LoginWithEmail = () => { } if (isValidEmail(email)) { - const resp = await sendEML(email, auth_domain.login, auth_domain.signup); + const resp = await sendEML(email, EML_REDIRECT, EML_REDIRECT); if (resp.status === 200) { setEMLSent(STATUS.SENT); } else { diff --git a/pages/recipes/api-sms-mfa/profile.tsx b/pages/recipes/api-sms-mfa/profile.tsx index 5dcf0b8..9a1086b 100644 --- a/pages/recipes/api-sms-mfa/profile.tsx +++ b/pages/recipes/api-sms-mfa/profile.tsx @@ -110,28 +110,24 @@ const styles: Record = { }; export const getServerSideProps: GetServerSideProps = async (context) => { - // Get session from cookie const cookies = new Cookies(context.req, context.res); const storedSession = cookies.get('api_session'); - // If session does not exist display an error + if (!storedSession) { return { props: { error: 'No user session found.' } }; } try { const stytchClient = loadStytch(); - // Validate Stytch session + const { session } = await stytchClient.sessions.authenticate({ session_token: storedSession }); - // Get the Stytch user object to display on page + const user = await stytchClient.users.get({ user_id: session.user_id }); - // Determine from the user object if this user has registered a webauthn device at this domain const hasRegisteredPhone = user.phone_numbers.length > 0; - // Set phoneNumber with optional chaining to handle potential undefined const phoneNumber = user.phone_numbers[0]?.phone_number ?? ''; - // Determine if user has access to the super secret area data let superSecretData = null; if ( session.authentication_factors.length === 2 && @@ -152,7 +148,6 @@ export const getServerSideProps: GetServerSideProps = async (context) => { }, }; } catch (error) { - // If session authentication fails display the error. return { props: { error: JSON.stringify(error) } }; } }; diff --git a/pages/recipes/api-sms-mfa/sms-register.ts b/pages/recipes/api-sms-mfa/sms-register.ts index ae065e7..a757653 100644 --- a/pages/recipes/api-sms-mfa/sms-register.ts +++ b/pages/recipes/api-sms-mfa/sms-register.ts @@ -1,3 +1,3 @@ -import LoginWithSMS from '../../../components/EmailSMS/LoginWithSMS'; +import LoginWithSMS from '../../../components/EmailSMS/LoginWithEmail'; export { LoginWithSMS as default };