Merge pull request #47 from authorizerdev/fix-user-verification

lakhansamani · web-flow · commit bdb21fed5d47 · 2024-04-02T14:06:31.000+05:30
fix: user verification
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -66,7 +66,7 @@
     "typescript": "^5.2.2"
   },
   "dependencies": {
-    "@authorizerdev/authorizer-js": "^2.0.0-beta.3",
+    "@authorizerdev/authorizer-js": "^2.0.1",
     "validator": "^13.11.0"
   }
 }
diff --git a/src/components/AuthorizerBasicAuthLogin.tsx b/src/components/AuthorizerBasicAuthLogin.tsx
@@ -11,6 +11,7 @@ import { Message } from './Message';
 import { AuthorizerVerifyOtp } from './AuthorizerVerifyOtp';
 import { OtpDataType, TotpDataType } from '../types';
 import { AuthorizerTOTPScanner } from './AuthorizerTOTPScanner';
+import { getEmailPhoneLabels, getEmailPhonePlaceholder } from '../utils/labels';
 
 const initOtpData: OtpDataType = {
   is_screen_visible: false,
@@ -232,7 +233,8 @@ export const AuthorizerBasicAuthLogin: FC<{
               className={styles['form-input-label']}
               htmlFor="authorizer-login-email"
             >
-              <span>* </span>Email / Phone Number
+              <span>* </span>
+              {getEmailPhoneLabels(config)}
             </label>
             <input
               name="email_or_phone_number"
@@ -242,10 +244,10 @@ export const AuthorizerBasicAuthLogin: FC<{
                   ? styles['input-error-content']
                   : null
               }`}
-              placeholder="eg. hello@world.com / +919999999999"
+              placeholder={getEmailPhonePlaceholder(config)}
               type="text"
               value={formData.email_or_phone_number || ''}
-              onChange={(e) =>
+              onChange={e =>
                 onInputChange('email_or_phone_number', e.target.value)
               }
             />
@@ -271,7 +273,7 @@ export const AuthorizerBasicAuthLogin: FC<{
               placeholder="********"
               type="password"
               value={formData.password || ''}
-              onChange={(e) => onInputChange('password', e.target.value)}
+              onChange={e => onInputChange('password', e.target.value)}
             />
             {errorData.password && (
               <div className={styles['form-input-error']}>
diff --git a/src/components/AuthorizerForgotPassword.tsx b/src/components/AuthorizerForgotPassword.tsx
@@ -10,6 +10,7 @@ import { formatErrorMessage } from '../utils/format';
 import { Message } from './Message';
 import { OtpDataType } from '../types';
 import { AuthorizerResetPassword } from './AuthorizerResetPassword';
+import { getEmailPhoneLabels, getEmailPhonePlaceholder } from '../utils/labels';
 
 interface InputDataType {
   email_or_phone_number: string | null;
@@ -145,8 +146,8 @@ export const AuthorizerForgotPassword: FC<{
         <Message type={MessageType.Error} text={error} onClose={onErrorClose} />
       )}
       <p style={{ textAlign: 'center', margin: '10px 0px' }}>
-        Please enter your email address.
-        <br /> We will send you an email to reset your password.
+        Please enter your {getEmailPhoneLabels(config)}.
+        <br /> We will send you an email / otp to reset your password.
       </p>
       <br />
       <form onSubmit={onSubmit} name="authorizer-forgot-password-form">
@@ -155,7 +156,8 @@ export const AuthorizerForgotPassword: FC<{
             className={styles['form-input-label']}
             htmlFor="authorizer-forgot-password-email-or-phone-number"
           >
-            <span>* </span>Email / Phone Number
+            <span>* </span>
+            {getEmailPhoneLabels(config)}
           </label>
           <input
             name="email_or_phone_number"
@@ -165,10 +167,10 @@ export const AuthorizerForgotPassword: FC<{
                 ? styles['input-error-content']
                 : null
             }`}
-            placeholder="eg. hello@world.com / +919999999999"
+            placeholder={getEmailPhonePlaceholder(config)}
             type="text"
             value={formData.email_or_phone_number || ''}
-            onChange={(e) =>
+            onChange={e =>
               onInputChange('email_or_phone_number', e.target.value)
             }
           />
diff --git a/src/components/AuthorizerRoot.tsx b/src/components/AuthorizerRoot.tsx
@@ -34,7 +34,10 @@ export const AuthorizerRoot: FC<{
   );
   const state = searchParams.get('state') || createRandomString();
   const scope = searchParams.get('scope')
-    ? searchParams.get('scope')?.toString().split(' ')
+    ? searchParams
+        .get('scope')
+        ?.toString()
+        .split(' ')
     : ['openid', 'profile', 'email'];
 
   const urlProps: Record<string, any> = {
@@ -51,7 +54,6 @@ export const AuthorizerRoot: FC<{
   }
 
   urlProps.redirect_uri = urlProps.redirectURL;
-
   return (
     <StyledWrapper>
       <AuthorizerSocialLogin urlProps={urlProps} roles={roles} />
diff --git a/src/components/AuthorizerSignup.tsx b/src/components/AuthorizerSignup.tsx
@@ -10,13 +10,24 @@ import { StyledButton, StyledFooter, StyledLink } from '../styledComponents';
 import { formatErrorMessage } from '../utils/format';
 import { Message } from './Message';
 import PasswordStrengthIndicator from './PasswordStrengthIndicator';
+import { OtpDataType } from '../types';
+import { AuthorizerVerifyOtp } from './AuthorizerVerifyOtp';
+import { getEmailPhoneLabels, getEmailPhonePlaceholder } from '../utils/labels';
 
 interface InputDataType {
+  given_name: string | null;
+  family_name: string | null;
   email_or_phone_number: string | null;
   password: string | null;
   confirmPassword: string | null;
 }
 
+const initOtpData: OtpDataType = {
+  is_screen_visible: false,
+  email: '',
+  phone_number: '',
+};
+
 export const AuthorizerSignup: FC<{
   setView?: (v: Views) => void;
   onSignup?: (data: AuthToken) => void;
@@ -25,13 +36,18 @@ export const AuthorizerSignup: FC<{
 }> = ({ setView, onSignup, urlProps, roles }) => {
   const [error, setError] = useState(``);
   const [loading, setLoading] = useState(false);
+  const [otpData, setOtpData] = useState<OtpDataType>({ ...initOtpData });
   const [successMessage, setSuccessMessage] = useState(``);
   const [formData, setFormData] = useState<InputDataType>({
+    given_name: null,
+    family_name: null,
     email_or_phone_number: null,
     password: null,
     confirmPassword: null,
   });
   const [errorData, setErrorData] = useState<InputDataType>({
+    given_name: null,
+    family_name: null,
     email_or_phone_number: null,
     password: null,
     confirmPassword: null,
@@ -67,6 +83,8 @@ export const AuthorizerSignup: FC<{
       const data: SignupInput = {
         email: email,
         phone_number: phone_number,
+        given_name: formData.given_name || '',
+        family_name: formData.family_name || '',
         password: formData.password || '',
         confirm_password: formData.confirmPassword || '',
       };
@@ -91,7 +109,18 @@ export const AuthorizerSignup: FC<{
         setLoading(false);
         return;
       }
-
+      if (
+        res &&
+        (res?.should_show_email_otp_screen ||
+          res?.should_show_mobile_otp_screen)
+      ) {
+        setOtpData({
+          is_screen_visible: true,
+          email: data.email || ``,
+          phone_number: data.phone_number || ``,
+        });
+        return;
+      }
       if (res) {
         setError(``);
         if (res.access_token) {
@@ -126,6 +155,22 @@ export const AuthorizerSignup: FC<{
     setError(``);
   };
 
+  useEffect(() => {
+    if ((formData.given_name || '').trim() === '') {
+      setErrorData({ ...errorData, given_name: 'First Name is required' });
+    } else {
+      setErrorData({ ...errorData, given_name: null });
+    }
+  }, [formData.given_name]);
+
+  useEffect(() => {
+    if ((formData.family_name || '').trim() === '') {
+      setErrorData({ ...errorData, family_name: 'Last Name is required' });
+    } else {
+      setErrorData({ ...errorData, family_name: null });
+    }
+  }, [formData.family_name]);
+
   useEffect(() => {
     if (formData.email_or_phone_number === '') {
       setErrorData({
@@ -182,15 +227,34 @@ export const AuthorizerSignup: FC<{
     }
   }, [formData.password, formData.confirmPassword]);
 
-  if (successMessage) {
-    return <Message type={MessageType.Success} text={successMessage} />;
+  if (otpData.is_screen_visible) {
+    return (
+      <>
+        {successMessage && (
+          <Message type={MessageType.Success} text={successMessage} />
+        )}
+        <AuthorizerVerifyOtp
+          {...{
+            setView,
+            onLogin: onSignup,
+            email: otpData.email || ``,
+            phone_number: otpData.phone_number || ``,
+            is_totp: otpData.is_totp || false,
+          }}
+          urlProps={urlProps}
+        />
+      </>
+    );
   }
 
   return (
     <>
       {error && (
         <Message type={MessageType.Error} text={error} onClose={onErrorClose} />
       )}
+      {successMessage && (
+        <Message type={MessageType.Success} text={successMessage} />
+      )}
       {(config.is_basic_authentication_enabled ||
         config.is_mobile_basic_authentication_enabled) &&
         !config.is_magic_link_login_enabled && (
@@ -199,22 +263,71 @@ export const AuthorizerSignup: FC<{
               <div className={styles['styled-form-group']}>
                 <label
                   className={styles['form-input-label']}
-                  htmlFor="authorizer-sign-up-email"
+                  htmlFor="authorizer-sign-up-given-name"
+                >
+                  <span>* </span>First Name
+                </label>
+                <input
+                  name="given_name"
+                  id="authorizer-sign-up-given-name"
+                  className={`${styles['form-input-field']} ${
+                    errorData.given_name ? styles['input-error-content'] : null
+                  }`}
+                  placeholder="eg. John"
+                  type="text"
+                  value={formData.given_name || ''}
+                  onChange={e => onInputChange('given_name', e.target.value)}
+                />
+                {errorData.given_name && (
+                  <div className={styles['form-input-error']}>
+                    {errorData.given_name}
+                  </div>
+                )}
+              </div>
+              <div className={styles['styled-form-group']}>
+                <label
+                  className={styles['form-input-label']}
+                  htmlFor="authorizer-sign-up-family-name"
+                >
+                  <span>* </span>Last Name
+                </label>
+                <input
+                  name="family_name"
+                  id="authorizer-sign-up-family-name"
+                  className={`${styles['form-input-field']} ${
+                    errorData.family_name ? styles['input-error-content'] : null
+                  }`}
+                  placeholder="eg. Doe"
+                  type="text"
+                  value={formData.family_name || ''}
+                  onChange={e => onInputChange('family_name', e.target.value)}
+                />
+                {errorData.family_name && (
+                  <div className={styles['form-input-error']}>
+                    {errorData.family_name}
+                  </div>
+                )}
+              </div>
+              <div className={styles['styled-form-group']}>
+                <label
+                  className={styles['form-input-label']}
+                  htmlFor="authorizer-sign-up-email-or-phone-number"
                 >
-                  <span>* </span>Email / Phone Number
+                  <span>* </span>
+                  {getEmailPhoneLabels(config)}
                 </label>
                 <input
-                  name="eemail_or_phone_numbermail"
-                  id="authorizer-login-email-or-phone-number"
+                  name="email_or_phone_number"
+                  id="authorizer-sign-up-email-or-phone-number"
                   className={`${styles['form-input-field']} ${
                     errorData.email_or_phone_number
                       ? styles['input-error-content']
                       : null
                   }`}
-                  placeholder="eg. hello@world.com / +919999999999"
+                  placeholder={getEmailPhonePlaceholder(config)}
                   type="text"
                   value={formData.email_or_phone_number || ''}
-                  onChange={(e) =>
+                  onChange={e =>
                     onInputChange('email_or_phone_number', e.target.value)
                   }
                 />
@@ -240,7 +353,7 @@ export const AuthorizerSignup: FC<{
                   placeholder="********"
                   type="password"
                   value={formData.password || ''}
-                  onChange={(e) => onInputChange('password', e.target.value)}
+                  onChange={e => onInputChange('password', e.target.value)}
                 />
                 {errorData.password && (
                   <div className={styles['form-input-error']}>
@@ -266,7 +379,7 @@ export const AuthorizerSignup: FC<{
                   placeholder="********"
                   type="password"
                   value={formData.confirmPassword || ''}
-                  onChange={(e) =>
+                  onChange={e =>
                     onInputChange('confirmPassword', e.target.value)
                   }
                 />
@@ -291,9 +404,13 @@ export const AuthorizerSignup: FC<{
                 disabled={
                   loading ||
                   disableSignupButton ||
+                  !!errorData.given_name ||
+                  !!errorData.family_name ||
                   !!errorData.email_or_phone_number ||
                   !!errorData.password ||
                   !!errorData.confirmPassword ||
+                  !formData.given_name ||
+                  !formData.family_name ||
                   !formData.email_or_phone_number ||
                   !formData.password ||
                   !formData.confirmPassword
diff --git a/src/components/AuthorizerVerifyOtp.tsx b/src/components/AuthorizerVerifyOtp.tsx
@@ -47,6 +47,7 @@ export const AuthorizerVerifyOtp: FC<{
       setLoading(true);
       const data: VerifyOtpInput = {
         email,
+        phone_number,
         otp: formData.otp || '',
       };
       if (urlProps?.state) {
@@ -98,6 +99,7 @@ export const AuthorizerVerifyOtp: FC<{
 
       const { data: res, errors } = await authorizerRef.resendOtp({
         email,
+        phone_number,
       });
       setSendingOtp(false);
       if (errors && errors.length) {
@@ -160,7 +162,7 @@ export const AuthorizerVerifyOtp: FC<{
             placeholder="e.g.- AB123C"
             type="password"
             value={formData.otp || ''}
-            onChange={(e) => onInputChange('otp', e.target.value)}
+            onChange={e => onInputChange('otp', e.target.value)}
           />
           {errorData.otp && (
             <div className={styles['form-input-error']}>{errorData.otp}</div>
diff --git a/src/types/index.ts b/src/types/index.ts
diff --git a/src/utils/labels.ts b/src/utils/labels.ts

Original file line number	Diff line number	Diff line change
`@@ -66,7 +66,7 @@`
`66`	`66`	`"typescript": "^5.2.2"`
`67`	`67`	`},`
`68`	`68`	`"dependencies": {`
`69`		`- "@authorizerdev/authorizer-js": "^2.0.0-beta.3",`
	`69`	`+ "@authorizerdev/authorizer-js": "^2.0.1",`
`70`	`70`	`"validator": "^13.11.0"`
`71`	`71`	`}`
`72`	`72`	`}`