Add auth checks to your react/react-native applications¶

Introduction¶

Lets say we have a simple todo application with three simple routes as follows

<Router>
      <Route path="/register" component={Register}/>
      <Route path="/login" component={Login}/>
      <ProtectedRoute path="/" component={TodoApp}/>
</Router>

We have two unprotected routes /login and /register and one protected route at /. The routes /login and /register will be accessible by all the users and the route / should be accessible only by authenticated users. Now how do we make sure that route is only accessible by authenticated users?

There are multiple ways to solve the problem. In this guide we will take a look at how you can add authentication using Hasura’s react-check-auth

Note

react-check-auth uses React’s context API which is part of the react 16.3 release. It shouldn’t be used with applications using React version < 16.3

Step 1: Installation¶

$ npm install react-check-auth --save

Step 2: Usage¶

Step 2.1: Add AuthProvider¶

Wrap your ProtectedRoute component with AuthProvider from react-check-auth that has an endpoint to fetch basic user information. This works because if the user had logged in, a cookie would already be present. For using authorization headers, read more on react-check-auth.

import React from "react";
import ReactDOM from "react-dom";

import {AuthProvider} from "react-check-auth";

const ProtectedRoute = () => (
  <AuthProvider authUrl={'https://auth.<cluster_name>.hasura-app.io/v1/user/info'}>
    // Rest of the code goes here
  </AuthProvider>
);

Step 2.2: Access user information¶

Now, in your ProtectedRoute component, you can route the user accordingly depending on whether the user is currently logged in or not. Here we are using AuthConsumer from react-check-auth. AuthConsumer accepts a renderProp which it will call with three parameters ( userInfo, isLoading, error ).

import {AuthConsumer} from "react-check-auth";
import {AuthProvider} from "react-check-auth";
import { Route, Redirect } from "react-router";
import TodoApp from "./todoapp";

const ProtectedRoute = () => (
  <AuthProvider authUrl={"https://auth.<cluster_name>.hasura-app.io/v1/user/info"}>
    // Rest of the code goes here
    <AuthConsumer>
      {({userInfo, isLoading, error}) => (
        userInfo ?
          (<Route path="/" component={ TodoApp }></Route>) :
          (
            <Redirect to="/login" />
          )
      )}
     </AuthConsumer>
  </AuthProvider>
);

If you haven’t implemented login/signup pages, you can use the Auth UI Kit. Take a look at the usage of Auth UI Kit url in the code sample below

import {AuthConsumer} from "react-check-auth";
import {AuthProvider} from "react-check-auth";
import { Route, Redirect } from "react-router";
import TodoApp from "./todoapp";

const ProtectedRoute = () => (
  <AuthProvider authUrl={"https://auth.<cluster_name>.hasura-app.io/v1/user/info"}>
    // Rest of the code goes here
    <AuthConsumer>
      {({userInfo, isLoading, error}) => (
        userInfo ?
          (<Route path="/" component={ TodoApp }></Route>) :
          (
            <a href="https://auth.<cluster_name>.hasura-app.io/ui">Login</a>
          )
      )}
     </AuthConsumer>
  </AuthProvider>
);

« previous | next »

Was this page helpful?