@vyro-x/react-auth

Client-side authentication for a React app

Usage

Install

npm i @vyro-x/react-auth

AuthProvider

Wrap your app with the AuthProvider

import { AuthProvider, setConfig as setAuthConfig } from '@vyro-x/react-auth';
import * as React from 'react';
import * as ReactDOM from 'react-dom/client';
import { App } from './App';

const container = document.getElementById('root');
if (!container) throw new Error('Failed to find the root element');
const root = ReactDOM.createRoot(container);

// It's important to call this early, before the AuthProvider.
setAuthConfig({
  authFrontendUrl: process.env.REACT_APP_AUTH_FRONTEND_URL,
  authApiUrl: process.env.REACT_APP_AUTH_API_URL,
});

root.render(
  <React.StrictMode>
    <AuthProvider>
      <App />
    </AuthProvider>
  </React.StrictMode>,
);

Callback URL

Add a callback URL at path=/auth/verify. This url is responsible for verifying and completing the auth flow.

import { useVerifyCallback } from '@vyro-x/react-auth';
import { useNavigate } from 'react-router';

export default function VerifyPage() {
  const navigate = useNavigate();
  useVerifyCallback({
    // This is up to you on how to handle a fatal authentication error
    onError: () => navigate('/error/500'),
  });

  return <>Loading...</>;
}

Config

Define config vars. Typically these are set in .env

REACT_APP_AUTH_FRONTEND_URL=http://127.0.0.1:8002
REACT_APP_AUTH_API_URL=http://127.0.0.1:3006

For the Vyro dev env these are:

REACT_APP_AUTH_FRONTEND_URL=https://login.vyrolabs.net
REACT_APP_AUTH_API_URL=https://authentication-api.vyrolabs.net

And in production they are:

REACT_APP_AUTH_FRONTEND_URL=https://login.vyro.com.au
REACT_APP_AUTH_API_URL=https://authentication-api.vyro.com.au

Add a login button

import { authService } from '@vyro-x/react-auth';
// ...

<button onClick={() => authService.login()}>Login</button>;

Add a logout button

import { authService } from '@vyro-x/react-auth';
// ...

<button onClick={() => authService.logout()}>Logout</button>;

Use auth state

import { useAuth } from '@vyro-x/react-auth';
// ...

const {
  // Boolean
  isAuthenticated,

  // User ID in GraphQL API
  userId,

  // Usage hasRole('admin') => boolean
  hasRole,

  // Array of roles
  roles,

  // Authentication state is initiatialising. Don't rely on the above until this is true.
  isLoading,
} = useAuth();

Protecting routes

import { Outlet, Route, Routes } from 'react-router-dom';
import { authService, useAuth } from '@vyro-x/react-auth';
import VerifyPage from './pages/auth/verify';
import ProtectedPage from './pages/protected';

const ProtectedRoutes = () => {
  const { isAuthenticated, isLoading } = useAuth();

  if (isLoading) {
    return null;
  }

  if (!isAuthenticated) {
    authService.login();
    return null;
  }

  return <Outlet />;
};

export const RoutesTree = () => {
  return (
    <Routes>
      <Route element={<ProtectedRoutes />}>
        <Route path={'/'} element={<HomePage />} />
        // This path will require the user to be logged in
        <Route path={'/i-am-protected'} element={<ProtectedPage />} />
      </Route>
      // This is your callback URL. Make sure it is public
      <Route path={'/auth/verify'} element={<VerifyPage />} />
      // You probably want this
      <Route path={'/error/500'} element={<Error500Page />} />
    </Routes>
  );
};

Use access token in an API request

import { authService } from '@vyro-x/react-auth';
// ...

axios.request({
  headers: {
    Authorization: `Bearer ${authService.tokens.getAccessToken()}`,
  },
});