@cobuildlab/react-native-auth0 NPM

React Native Auth0

A wrapper on auth0's react native library with common case features already implemented.

Installation

Run on your terminal the following command:

$ npm i @cobuildlab/react-native-auth0

Usage

Auth0 Client Setup:

Create a new client instance using Auth0Native:

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
// and store them in the async store or another store of your choice
const CREDENTIALS_HANDLER = {
  save: async (credentials): Promise<void> => {
    const value = JSON.stringify(credentials);
    await AsyncStorage.setItem('credentials_store', value);
  },
  get: async () => {
    const value = await AsyncStorage.getItem('credentials_store');
    return value != null ? JSON.parse(value) : null;
  },
  clear: async () => {
    await AsyncStorage.removeItem('credentials_store');
    apolloClient.resetStore();
  },
  // You can specify a what token the library will validate
  tokenToValidate: 'accessToken',
  // or pass a function that validate it
  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);

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}>
    <App />
  </AuthProvider>
);

Hook usage:

import { View, Button } from 'react-native;
import { useAuth } from '@cobuildlab/react-native-auth0';

export const LoginView = () => {
  const { authorize } = useAuth();

  return (
    <View>
      <Button onPress={authorize} title="Sign in">
    </View>
  )
}

Logout View:

import { View, Button } from 'react-native;
import { useAuth } from '@cobuildlab/react-native-auth0';

export const LogOutView = () => {
  const { clearSession } = useAuth();

  return (
    <View>
      <Button onPress={clearSession} title="Sign in">
    </View>
  )
}

App Component:

import { useAuth } from '@cobuildlab/react-native-auth0';
import { LoginView } from './LoginView';
import { LogOutView } from './LogOutView';
import { MainView, Loading } from './others';

export function App() {
  const { isLoading, isAuthenticated, clearSession } = useAuth();

  if (isLoading) {
    return <Loading />;
  }

  if (!isAuthenticated) {
    return <LoginView />;
  }

  return <MainView />;
}