react-box-auth v0.0.8
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.