fix social login

Author: lakhansamani

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.2.0-beta.1",
+  "version": "1.2.0-beta.8",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -66,7 +66,7 @@
     "typescript": "^5.2.2"
   },
   "dependencies": {
-    "@authorizerdev/authorizer-js": "^2.0.0-beta.1",
+    "@authorizerdev/authorizer-js": "^2.0.0-beta.3",
     "validator": "^13.11.0"
   }
 }

package.json

@@ -8,8 +8,8 @@ import { useAuthorizer } from '../contexts/AuthorizerContext';
 import { StyledButton, StyledFooter, StyledLink } from '../styledComponents';
 import { formatErrorMessage } from '../utils/format';
 import { Message } from './Message';
-import { AuthorizerVerifyOtp } from './AuthorizerVerifyOtp';
 import { OtpDataType } from '../types';
+import { AuthorizerResetPassword } from './AuthorizerResetPassword';
 
 interface InputDataType {
   email_or_phone_number: string | null;
@@ -24,8 +24,9 @@ const initOtpData: OtpDataType = {
 export const AuthorizerForgotPassword: FC<{
   setView?: (v: Views) => void;
   onForgotPassword?: (data: any) => void;
+  onPasswordReset?: () => void;
   urlProps?: Record<string, any>;
-}> = ({ setView, onForgotPassword, urlProps }) => {
+}> = ({ setView, onForgotPassword, onPasswordReset, urlProps }) => {
   const [error, setError] = useState(``);
   const [loading, setLoading] = useState(false);
   const [successMessage, setSuccessMessage] = useState(``);
@@ -110,7 +111,7 @@ export const AuthorizerForgotPassword: FC<{
         email_or_phone_number: 'Email OR Phone Number is required',
       });
     } else if (
-      formData.email_or_phone_number !== '' &&
+      formData.email_or_phone_number !== null &&
       !isEmail(formData.email_or_phone_number || '') &&
       !isMobilePhone(formData.email_or_phone_number || '')
     ) {
@@ -124,21 +125,17 @@ export const AuthorizerForgotPassword: FC<{
   }, [formData.email_or_phone_number]);
 
   if (successMessage) {
-    return <Message type={MessageType.Success} text={successMessage} />;
-  }
-
-  if (otpData.is_screen_visible) {
     return (
-      <AuthorizerVerifyOtp
-        email={otpData.email}
-        phone_number={otpData.phone_number}
-        urlProps={urlProps}
-        onLogin={() => {
-          if (onForgotPassword) {
-            onForgotPassword({});
-          }
-        }}
-      />
+      <>
+        <Message type={MessageType.Success} text={successMessage} />
+        {otpData.is_screen_visible && (
+          <AuthorizerResetPassword
+            showOTPInput
+            onReset={onPasswordReset}
+            phone_number={otpData.phone_number}
+          />
+        )}
+      </>
     );
   }
 
@@ -191,7 +188,7 @@ export const AuthorizerForgotPassword: FC<{
           }
           appearance={ButtonAppearance.Primary}
         >
-          {loading ? `Processing ...` : `Send Email`}
+          {loading ? `Processing ...` : `Request Change`}
         </StyledButton>
       </form>
       {setView && (

src/components/AuthorizerForgotPassword.tsx

@@ -10,23 +10,32 @@ import { getSearchParams } from '../utils/url';
 import PasswordStrengthIndicator from './PasswordStrengthIndicator';
 
 type Props = {
+  showOTPInput?: boolean;
   onReset?: (res: any) => void;
+  phone_number?: string;
 };
 
 interface InputDataType {
+  otp: string | null;
   password: string | null;
   confirmPassword: string | null;
 }
 
-export const AuthorizerResetPassword: FC<Props> = ({ onReset }) => {
+export const AuthorizerResetPassword: FC<Props> = ({
+  onReset,
+  showOTPInput,
+  phone_number,
+}) => {
   const { token, redirect_uri } = getSearchParams();
-  const [error, setError] = useState(!token ? `Invalid token` : ``);
+  const [error, setError] = useState('');
   const [loading, setLoading] = useState(false);
   const [formData, setFormData] = useState<InputDataType>({
+    otp: null,
     password: null,
     confirmPassword: null,
   });
   const [errorData, setErrorData] = useState<InputDataType>({
+    otp: null,
     password: null,
     confirmPassword: null,
   });
@@ -43,6 +52,8 @@ export const AuthorizerResetPassword: FC<Props> = ({ onReset }) => {
     try {
       const { data: res, errors } = await authorizerRef.resetPassword({
         token,
+        otp: formData.otp || '',
+        phone_number: phone_number || '',
         password: formData.password || '',
         confirm_password: formData.confirmPassword || '',
       });
@@ -111,6 +122,30 @@ export const AuthorizerResetPassword: FC<Props> = ({ onReset }) => {
         <Message type={MessageType.Error} text={error} onClose={onErrorClose} />
       )}
       <form onSubmit={onSubmit} name="authorizer-reset-password-form">
+        {showOTPInput && (
+          <div className={styles['styled-form-group']}>
+            <label
+              className={styles['form-input-label']}
+              htmlFor="authorizer-verify-otp"
+            >
+              <span>* </span>OTP (One Time Password)
+            </label>
+            <input
+              name="otp"
+              id="authorizer-verify-otp"
+              className={`${styles['form-input-field']} ${
+                errorData.otp ? styles['input-error-content'] : null
+              }`}
+              placeholder="e.g.- AB123C"
+              type="password"
+              value={formData.otp || ''}
+              onChange={(e) => onInputChange('otp', e.target.value)}
+            />
+            {errorData.otp && (
+              <div className={styles['form-input-error']}>{errorData.otp}</div>
+            )}
+          </div>
+        )}
         <div className={styles['styled-form-group']}>
           <label
             className={styles['form-input-label']}

src/components/AuthorizerResetPassword.tsx

@@ -17,8 +17,16 @@ export const AuthorizerRoot: FC<{
   onSignup?: (data: AuthToken | void) => void;
   onMagicLinkLogin?: (data: any) => void;
   onForgotPassword?: (data: any) => void;
+  onPasswordReset?: () => void;
   roles?: string[];
-}> = ({ onLogin, onSignup, onMagicLinkLogin, onForgotPassword, roles }) => {
+}> = ({
+  onLogin,
+  onSignup,
+  onMagicLinkLogin,
+  onForgotPassword,
+  onPasswordReset,
+  roles,
+}) => {
   const [view, setView] = useState(Views.Login);
   const { config } = useAuthorizer();
   const searchParams = new URLSearchParams(
@@ -84,6 +92,7 @@ export const AuthorizerRoot: FC<{
         <AuthorizerForgotPassword
           setView={setView}
           onForgotPassword={onForgotPassword}
+          onPasswordReset={onPasswordReset}
           urlProps={urlProps}
         />
       )}

src/components/AuthorizerRoot.tsx

@@ -30,6 +30,8 @@ export const AuthorizerSocialLogin: React.FC<{
   const data: {
     scope?: string;
     roles?: string[];
+    redirect_uri?: string;
+    redirectURL?: string;
   } = {
     ...(urlProps || {}),
     scope: urlProps?.scope.join(' '),
@@ -39,6 +41,10 @@ export const AuthorizerSocialLogin: React.FC<{
     data.roles = roles;
   }
 
+  if (!data.redirect_uri && !data.redirectURL) {
+    data.redirect_uri = config.redirectURL;
+  }
+
   const queryParams = createQueryParams(data);
 
   return (