Merge pull request #15 from cobuildlab/feature/auth0-class-extend

Feature/auth0 class extend

Author: jesusrodrz

README.md

@@ -9,22 +9,24 @@ A wrapper on auth0's react native library with common case features already impl
 ```sh
 $ npm i @cobuildlab/react-native-auth0
 ```
+
 ## Usage
 
 #### Auth0 Client Setup:
 
 Create a new client instance using Auth0Native:
 
-```tsx
+```ts
 import { Auth0Native } from '@cobuildlab/react-native-auth0';
+import jwtDecode from 'jwt-decode';
 
 // AUTH0 options
 const AUTH0_OPTIONS = {
   clientId: AUTH_CLIENT_ID,
   domain: AUTH_CLIENT_DOMAIN,
-}
+};
 
-// You can handle the credentials obtained in auth0 
+// You can handle the credentials obtained in auth0
 // and store them in the async store or another store of your choice
 const CREDENTIALS_HANDLER = {
   save: async (credentials): Promise<void> => {
@@ -39,7 +41,15 @@ const CREDENTIALS_HANDLER = {
     await AsyncStorage.removeItem('credentials_store');
     apolloClient.resetStore();
   },
-}
+  validateToken: (credentials) => {
+    const { exp } = jwtDecode(credentials.idToken) as { exp: number };
+
+    // Current time unix (in seconds)
+    const currentTime = Math.floor(new Date().getTime() / 1000);
+
+    return exp > currentTime;
+  },
+};
 
 export const client = new Auth0Native(AUTH0_OPTIONS, CREDENTIALS_HANDLER);
 ```
@@ -50,13 +60,10 @@ Then import the client and pass through props to the provider:
 import { AuthProvider } from '@cobuildlab/react-native-auth0';
 import { client } from './config';
 
-
 const AUTH0_SCOPE = 'offline_access email openid profile';
 
 export const App = () => (
-  <AuthProvider 
-    client={auth0NativeClient} 
-    scope={client}>
+  <AuthProvider client={auth0NativeClient} scope={client}>
     <App />
   </AuthProvider>
 );
@@ -105,26 +112,26 @@ App Component:
 import { useAuth } from '@cobuildlab/react-native-auth0';
 import { LoginView } from './LoginView';
 import { LogOutView } from './LogOutView';
-import { MainView,  Loading } from './others'
-
+import { MainView, Loading } from './others';
 
 export function App() {
   const { isLoading, isAuthenticated, clearSession } = useAuth();
 
-  if(isLoading){
-    return <Loading />
+  if (isLoading) {
+    return <Loading />;
   }
 
-  if(!isAuthenticated){
-    return < LoginView />
+  if (!isAuthenticated) {
+    return <LoginView />;
   }
 
-  return <MainView />
+  return <MainView />;
 }
-
 ```
 
-### TODO 
-  
-  - Documentation
-  - Test Code
+### TODO
+
+- Documentation
+- Test Code
+- Hanlde error cases
+- hook for subscribe to error cases

package-lock.json

@@ -47,9 +47,6 @@
     "typedoc-plugin-markdown": "^2.3.1",
     "typescript": "^4.4.2"
   },
-  "dependencies":{
-    "jwt-decode": "^3.1.2"
-  },
   "peerDependencies": {
     "react": ">=16.13.1",
     "react-native-auth0": ">=2.10.0"

package.json

@@ -4,34 +4,38 @@ import Auth0, {
   Options,
 } from 'react-native-auth0';
 import { Credentials, CredentialsHandlersInput, ErrorCases } from './types';
-import { ErrorPublisher, getTimestamp } from './utils';
+import { ErrorPublisher } from './utils';
 
 export class Auth0Native extends Auth0 {
   private credentials: Credentials | null = null;
 
   private saveCredentials: CredentialsHandlersInput['save'];
-
   private getCredentials: CredentialsHandlersInput['get'];
-
   private clearCredentials: CredentialsHandlersInput['clear'];
+  private validateToken: CredentialsHandlersInput['validateToken'];
 
   private errors: Record<ErrorCases, ErrorPublisher> = {
     AUTHORIZATION: new ErrorPublisher(),
     CLEAR_SESSION: new ErrorPublisher(),
     REFRESH_TOKEN: new ErrorPublisher(),
+    SAVE_CREDENTIALS: new ErrorPublisher(),
   };
 
   constructor(options: Options, credentialsHandlers: CredentialsHandlersInput) {
     super(options);
     this.saveCredentials = credentialsHandlers.save;
     this.getCredentials = credentialsHandlers.get;
     this.clearCredentials = credentialsHandlers.clear;
+    this.validateToken = credentialsHandlers.validateToken;
   }
 
   async handleCredentials(data: Auth0Credentials): Promise<Credentials> {
-    const credentials: Credentials = { ...data, issuedAt: getTimestamp() };
-
-    await this.saveCredentials(credentials);
+    const credentials: Credentials = { ...data };
+    try {
+      await this.saveCredentials(credentials);
+    } catch (error) {
+      this.errors.SAVE_CREDENTIALS.notify(error as Error);
+    }
 
     this.credentials = credentials;
 
@@ -63,7 +67,8 @@ export class Auth0Native extends Auth0 {
       return this.handleCredentials(result);
     } catch (error) {
       this.errors.AUTHORIZATION.notify(error as Error);
-      return;
+
+      throw error;
     }
   }
 
@@ -86,11 +91,7 @@ export class Auth0Native extends Auth0 {
       return false;
     }
 
-    const tokenTimestamp = credentials.expiresIn + credentials.issuedAt;
-
-    const validToken = tokenTimestamp > getTimestamp();
-
-    if (validToken) {
+    if (this.validateToken(credentials)) {
       this.credentials = credentials;
       return true;
     }

src/client.ts

@@ -16,61 +16,50 @@ export const AuthProvider: React.FC<{
   });
 
   useEffect(() => {
-    (async () => {
-      try {
-        const isAuth = await client.isAuthenticated();
-
-        setState((prev) => ({
-          ...prev,
-          isLoading: false,
-          isAuthenticated: isAuth,
-        }));
-      } catch (error) {
-        console.log(error);
-      }
-    })();
+    client.isAuthenticated().then((isAuth) => {
+      setState((prev) => ({
+        ...prev,
+        isLoading: false,
+        isAuthenticated: isAuth,
+      }));
+    });
   }, [client]);
 
   const authorize: AuthClientContextType['authorize'] = async ({
     scope: newScope,
     options,
   }) => {
     setState((prev) => ({ ...prev, isLoading: true }));
-
-    try {
-      await client.authorize(newScope || scope, options);
-
-      setState((prev) => ({
-        ...prev,
-        isLoading: false,
-        isAuthenticated: true,
-      }));
-    } catch {
-      setState((prev) => ({
-        ...prev,
-        isLoading: false,
-        isAuthenticated: false,
-      }));
-    }
+    client
+      .authorize(newScope || scope, options)
+      .then(() => {
+        setState((prev) => ({
+          ...prev,
+          isLoading: false,
+          isAuthenticated: true,
+        }));
+      })
+      .catch(() => {
+        setState((prev) => ({
+          ...prev,
+          isLoading: false,
+          isAuthenticated: false,
+        }));
+      });
   };
 
   const clearSession: AuthClientContextType['clearSession'] = async () => {
     setState((prev) => ({
       ...prev,
       isLoading: true,
     }));
-    console.log('logging out...');
-
-    try {
-      await client.clearSession();
-    } catch (error) {
-      console.log(error);
-    }
-    setState((prev) => ({
-      ...prev,
-      isLoading: false,
-      isAuthenticated: false,
-    }));
+    client.clearSession().then(() => {
+      setState((prev) => ({
+        ...prev,
+        isLoading: false,
+        isAuthenticated: false,
+      }));
+    });
   };
 
   return (

src/provider.tsx

@@ -4,13 +4,14 @@ import {
 } from 'react-native-auth0';
 
 export interface Credentials extends Auth0Credentials {
-  issuedAt: number;
+  issuedAt?: number;
 }
 
 export type CredentialsHandlersInput = {
   save: (data: Credentials) => void | Promise<void>;
   clear: () => void | Promise<void>;
   get: () => (Credentials | null) | Promise<Credentials | null>;
+  validateToken: (data: Credentials) => boolean;
 };
 
 export interface AuthClientContextType {
@@ -29,4 +30,5 @@ export enum ErrorCases {
   AUTHORIZATION = 'AUTHORIZATION',
   CLEAR_SESSION = 'CLEAR_SESSION',
   REFRESH_TOKEN = 'REFRESH_TOKEN',
+  SAVE_CREDENTIALS = 'SAVE_CREDENTIALS',
 }