React Auth Box

React components and utility functions for implementing client-side auth in React.

Check out express auth box for a server complement in express.

The following is a sample of using the various components in this library for implementing a very simple Authentication strategy:

import React from 'react';
import { useState } from 'react';
import {
  RegisterContainer,
  LoginContainer,
  UrlConfig,
  api,
} from 'react-box-auth';
import './App.css';

function App() {
  const [ secret, setSecret ] = useState(null);

  return (
    <div className="App">
      <UrlConfig URL='http://localhost:8080' />
      <h1>Auth Test</h1>
      <RegisterContainer handleRegister={(data) => console.log(data)} />
      <LoginContainer handleLogin={data => console.log(data)} />
      <button onClick={async () => {
        const resp = await api.get('/ping');
        setSecret(resp.data);
      }}>Refresh Secret</button>
      <p>The secret is: {secret}</p>
    </div>
  );
}

export default App;
~

To wit, react-auth-box exposes two primary components (RegisterContainer and LoginContainer), a helper component (UrlConfig), and an api object for making axios calls to restricted routes.

Presumed Routes

react-auth-box assumes a number of routes relating to auth to already be implemented on a server.

By default the package will treat http://localhost:3001/ as a BASE__URL.

The routes that are assumed are as follows:

• POST /auth/register/
• POST /auth/login/

Both register and login routes expect to be sent a POST body with email and password fields. The package also assumes that both of these routes will return an object with two fields: user and token. user should be data about the logged in or registered user, and token should be a jwt for passing back to the server to make authenticated HTTP requests.

While not strictly necessary, it can be quite helpful to use the /verify route for fetch information about the current user:

• GET /verify

The first two, viz., /register and /login, are public routes and do not need anything further. verify requires that the token from above be attached to the request as a bearer token in order to successfully authenticate; else, a 401 should be returned.

To authenticate, add an Authorization header to the request; the value should be of the form Bearer <token>. Where <token> should be the jwt returned from the previous routes, e.g., Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoiYm9iYnkiLCJpYXQiOjE1NjY1MDYxNTl9.UCiGoUY_ynlLrn1uvMZypkEKsQ8RdKlhyTn1aw_ElHM.

Registration

The RegisterContainer component renders a simple form to the user--currently, it just accepts an email and password-- and manages the api call to the server for handling form submission as well as storing the token returned from the server. It can export user object as well if it is passed a handleRegister prop function. This function will be called when the registration api call completes successfully and it will be passed the user object as an argument.

Also, the form will be replaced with a success message if the server responds to the registration api call with a success message.

The route to be called from RegisterContainer is POST /auth/register/.

Login

Login is pretty similar to Register; the main difference is that LoginContainer implies the server will not create a new user with the provided data but will verify the submitted user's password against a stored password_digest.

The route to be called from LoginContainer is POST /auth/login/.

Getting User Info

react-auth-box includes a function getUserInfo that will make an authenticated api call to GET /verify. This utility method can be used to A) determine if a user is "already logged in" and B) get current user information for rendering or fetching additional resources by user id.

Make additional api calls

Perhaps the most critical portion of an auth package is the ability to make subsequent authenticated api calls to a server. react-auth-box exposes an api object, that is just an axios instance where the BaseURL and auth headers have been pre-configured.

By importing api, you can use normal methods like api.get, api.post, and api.put with given paths/post bodies.

UrlConfig

Finally, there is a utility component for specifying a BASE_URL to be used by the api helper.

      <UrlConfig URL='http://localhost:8080' />

If you pass an URL prop to UrlConfig, the base url for all api calls will be set to that value.

Potentially, other props may be added to UrlConfig to further customize behavior of the api object but that is the only option for now.