Fixed different handling and docs for otp login

arcana-network · Jan 10, 2024 · 043114b · 043114b
1 parent f90446c
commit 043114b
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 21 deletions.
diff --git a/src/index.ts b/src/index.ts
@@ -139,8 +139,9 @@ class AuthProvider {
     await this.init()
     return {
       begin: () => this._loginWithOTPStart(email),
-      isCompleteRequired:
-        (await this._provider.getKeySpaceConfigType()) === 'global',
+      isCompleteRequired: !(
+        (await this._provider.getKeySpaceConfigType()) === 'global'
+      ),
     }
   }
 
@@ -255,7 +256,10 @@ class AuthProvider {
       throw new Error('Invalid email')
     }
 
-    await this._provider.initOTPLogin(email)
+    const url = await this._provider.initOTPLogin(email)
+    if (url && typeof url === 'string') {
+      await this.beginLogin(url)
+    }
   }
 
   private _loginWithOTPComplete = async (

diff --git a/src/provider.ts b/src/provider.ts
@@ -145,7 +145,7 @@ export class ArcanaProvider
 
   public async initOTPLogin(email: string) {
     const c = await this.getCommunication('initOTPLogin')
-    await c.initOTPLogin(email)
+    return await c.initOTPLogin(email)
   }
   public async completeOTPLogin(otp: string) {
     const c = await this.getCommunication('completeOTPLogin')

diff --git a/src/typings.ts b/src/typings.ts
@@ -145,7 +145,7 @@ export interface ChildMethods {
         setToken: string
       }
     | string
-  initOTPLogin: (email: string) => Promise<void>
+  initOTPLogin: (email: string) => Promise<void | string>
   completeOTPLogin: (otp: string) => Promise<void>
   expandWallet: () => Promise<void>
   getReconnectionUrl: () => Promise<string>

diff --git a/src/ui/modal.tsx b/src/ui/modal.tsx
@@ -16,6 +16,7 @@ const WAIT_TEXT = {
   SOCIAL: 'Please complete the login to proceed',
   OTP_INIT: 'Sending login OTP to your email address',
   OTP_SENT: '',
+  OTP_SENT_GLOBAL: 'Please complete the login to proceed',
   OTP_ERROR: 'Invalid OTP, please try again',
 }
 
@@ -27,9 +28,21 @@ const initLoaderState = {
 
 const reducer = (
   state: typeof initLoaderState,
-  action: 'SOCIAL' | 'RESET' | 'OTP_SENT' | 'OTP_INIT' | 'OTP_ERROR'
+  action:
+    | 'SOCIAL'
+    | 'RESET'
+    | 'OTP_SENT'
+    | 'OTP_INIT'
+    | 'OTP_ERROR'
+    | 'OTP_SENT_GLOBAL'
 ) => {
-  if (action == 'SOCIAL' || action == 'OTP_SENT' || action == 'OTP_INIT' || action == 'OTP_ERROR') {
+  if (
+    action == 'OTP_SENT_GLOBAL' ||
+    action == 'SOCIAL' ||
+    action == 'OTP_SENT' ||
+    action == 'OTP_INIT' ||
+    action == 'OTP_ERROR'
+  ) {
     return {
       text: WAIT_TEXT[action],
       type: action,
@@ -57,28 +70,29 @@ const Modal = (props: ModalParams) => {
   const otpLogin = async (email: string) => {
     dispatch('OTP_INIT')
     const login = await props.loginWithOTPStart(email)
-    dispatch('OTP_SENT')
+    dispatch(login.isCompleteRequired ? 'OTP_SENT' : 'OTP_SENT_GLOBAL')
     return login
   }
 
   if (loaderState.loading) {
     return (
       <Overlay>
         <Container mode={props.mode}>
-          {loaderState.type == 'OTP_SENT' ?
-            <OTPEntry 
+          {loaderState.type == 'OTP_SENT' ? (
+            <OTPEntry
               loginWithOtpStart={() => props.loginWithOTPStart(email)}
               setError={() => dispatch('OTP_ERROR')}
               closeFunc={props.closeFunc}
-              loginWithOtpComplete={props.loginWithOTPComplete} 
+              loginWithOtpComplete={props.loginWithOTPComplete}
               compact={props.options.compact}
-            /> :
-            (<Loader
+            />
+          ) : (
+            <Loader
               compact={props.options.compact}
               text={loaderState.text}
               mode={props.mode}
-            >
-            </Loader>)}
+            ></Loader>
+          )}
         </Container>
       </Overlay>
     )
@@ -87,8 +101,9 @@ const Modal = (props: ModalParams) => {
   return (
     <Overlay closeFunc={props.closeFunc}>
       <Container mode={props.mode}>
-        {loaderState.type == 'OTP_ERROR' ? 
-        <OTPError action={() => dispatch('RESET')}/> :
+        {loaderState.type == 'OTP_ERROR' ? (
+          <OTPError action={() => dispatch('RESET')} />
+        ) : (
           <>
             <Header compact={props.options.compact} logo={props.logo} />
             <EmailLogin
@@ -106,11 +121,11 @@ const Modal = (props: ModalParams) => {
                 />
               </>
             ) : null}
-          </>}
-
+          </>
+        )}
       </Container>
     </Overlay>
   )
 }
 
-export { Modal }
+export { Modal }
diff --git a/usage.md b/usage.md
@@ -142,12 +142,25 @@ Social login
 const provider = await auth.loginWithSocial(`${loginType}`)
 ```
 
-Passwordless login via an email verification link
+[DEPRECATED] Passwordless login via an email verification link
 
 ```js
 const provider = await auth.loginWithLink(`${email}`)
 ```
 
+Passwordless login via an OTP
+
+```js
+const login = await auth.loginWithOTPStart(`${email}`)
+await login.begin()
+
+if(login.isCompleteRequired) {
+  await loginWithOTPComplete(`${otp}`, onMFARequired() => {
+    // Hide overlay(if used) so that user can recover device share via wallet ui
+  })
+}
+```
+
 Check if a user is logged in
 
 ```js