Add ability to send totp

Author: lakhansamani

package-lock.json

@@ -65,6 +65,6 @@
     "typescript": "^5.2.2"
   },
   "dependencies": {
-    "@authorizerdev/authorizer-js": "^1.2.15"
+    "@authorizerdev/authorizer-js": "^1.2.17"
   }
 }

package.json

@@ -12,13 +12,13 @@ import { OtpDataType, TotpDataType } from '../types';
 import { AuthorizerTOTPScanner } from './AuthorizerTOTPScanner';
 
 const initOtpData: OtpDataType = {
-  isScreenVisible: false,
+  is_screen_visible: false,
   email: '',
   phone_number: '',
 };
 
 const initTotpData: TotpDataType = {
-  isScreenVisible: false,
+  is_screen_visible: false,
   email: '',
   phone_number: '',
   authenticator_scanner_image: '',
@@ -85,7 +85,7 @@ export const AuthorizerBasicAuthLogin: FC<{
         res.authenticator_recovery_codes
       ) {
         setTotpData({
-          isScreenVisible: true,
+          is_screen_visible: true,
           email: data.email || ``,
           phone_number: data.phone_number || ``,
           authenticator_scanner_image: res.authenticator_scanner_image,
@@ -101,9 +101,10 @@ export const AuthorizerBasicAuthLogin: FC<{
           res?.should_show_totp_screen)
       ) {
         setOtpData({
-          isScreenVisible: true,
+          is_screen_visible: true,
           email: data.email || ``,
           phone_number: data.phone_number || ``,
+          is_totp: res?.should_show_totp_screen || false,
         });
         return;
       }
@@ -163,7 +164,7 @@ export const AuthorizerBasicAuthLogin: FC<{
     }
   }, [formData.password]);
 
-  if (totpData.isScreenVisible) {
+  if (totpData.is_screen_visible) {
     return (
       <AuthorizerTOTPScanner
         {...{
@@ -181,14 +182,15 @@ export const AuthorizerBasicAuthLogin: FC<{
     );
   }
 
-  if (otpData.isScreenVisible) {
+  if (otpData.is_screen_visible) {
     return (
       <AuthorizerVerifyOtp
         {...{
           setView,
           onLogin,
           email: otpData.email || ``,
           phone_number: otpData.phone_number || ``,
+          is_totp: otpData.is_totp || false,
         }}
         urlProps={urlProps}
       />
@@ -207,7 +209,7 @@ export const AuthorizerBasicAuthLogin: FC<{
               className={styles['form-input-label']}
               htmlFor="authorizer-login-email"
             >
-              <span>* </span>Email
+              <span>* </span>Email / Phone Number
             </label>
             <input
               name="email_or_phone_number"

src/components/AuthorizerBasicAuthLogin.tsx

@@ -1,5 +1,5 @@
 import React, { FC, useState } from 'react';
-import { StyledButton } from '../styledComponents';
+import { StyledButton, StyledFlex, StyledSeparator } from '../styledComponents';
 import { ButtonAppearance, Views } from '../constants';
 import { AuthorizerVerifyOtp } from './AuthorizerVerifyOtp';
 
@@ -46,17 +46,20 @@ export const AuthorizerTOTPScanner: FC<{
       <p style={{ margin: '10px 0px', fontWeight: 'bold' }}>
         Scan the QR code or enter the secret key into your authenticator app.
       </p>
-      <img
-        src={`data:image/jpeg;base64,${authenticator_scanner_image}`}
-        alt="scanner"
-      />
+      <StyledFlex justifyContent="center">
+        <img
+          src={`data:image/jpeg;base64,${authenticator_scanner_image}`}
+          alt="scanner"
+        />
+      </StyledFlex>
       <p style={{ margin: '10px 0px' }}>
         If you are unable to scan the QR code, please enter the secret key
         manually.
       </p>
       <p style={{ margin: '10px 0px', fontWeight: 'bold' }}>
         {authenticator_secret}
       </p>
+      <StyledSeparator />
       <p style={{ margin: '10px 0px' }}>
         If you lose access to your authenticator app, you can use the recovery
         codes below to regain access to your account. Please save these codes

src/components/AuthorizerTOTPScanner.tsx

@@ -18,7 +18,8 @@ export const AuthorizerVerifyOtp: FC<{
   email?: string;
   phone_number?: string;
   urlProps?: Record<string, any>;
-}> = ({ setView, onLogin, email, phone_number, urlProps }) => {
+  is_totp?: boolean;
+}> = ({ setView, onLogin, email, phone_number, urlProps, is_totp }) => {
   const [error, setError] = useState(``);
   const [successMessage, setSuccessMessage] = useState(``);
   const [loading, setLoading] = useState(false);
@@ -52,7 +53,7 @@ export const AuthorizerVerifyOtp: FC<{
       if (urlProps?.state) {
         data.state = urlProps.state;
       }
-
+      data.is_totp = !!is_totp;
       const res = await authorizerRef.verifyOtp(data);
       setLoading(false);
 

src/components/AuthorizerVerifyOtp.tsx

@@ -10,6 +10,7 @@ import { AuthorizerSocialLogin } from './components/AuthorizerSocialLogin';
 import { AuthorizerResetPassword } from './components/AuthorizerResetPassword';
 import { AuthorizerVerifyOtp } from './components/AuthorizerVerifyOtp';
 import { AuthorizerRoot as Authorizer } from './components/AuthorizerRoot';
+import { AuthorizerTOTPScanner } from './components/AuthorizerTOTPScanner';
 
 export {
   useAuthorizer,
@@ -22,4 +23,5 @@ export {
   AuthorizerSocialLogin,
   AuthorizerResetPassword,
   AuthorizerVerifyOtp,
+  AuthorizerTOTPScanner,
 };

src/index.tsx

@@ -1,7 +1,7 @@
 import React, { ReactNode } from 'react';
 import styles from '../styles/default.css';
 
-const StyledSeparator = ({ children }: { children: ReactNode }) => {
+const StyledSeparator = ({ children }: { children?: ReactNode }) => {
   return <div className={styles['styled-separator']}>{children}</div>;
 };
 

src/styledComponents/StyledSeparator.tsx

@@ -61,13 +61,14 @@ export type AuthorizerContextPropsType = {
 };
 
 export type OtpDataType = {
-  isScreenVisible: boolean;
+  is_screen_visible: boolean;
   email?: string;
   phone_number?: string;
+  is_totp?: boolean;
 };
 
 export type TotpDataType = {
-  isScreenVisible: boolean;
+  is_screen_visible: boolean;
   email?: string;
   phone_number?: string;
   authenticator_scanner_image: string;