Skip to main content

React

Implementing a secure and reliable authentication flow in a web application can be intimidating. We created a custom React library that takes care of the hard parts for you.

Before you begin, please ensure that

  • You are using React 17 or above.
  • You are familiar how React hooks work.

Getting started​

Install the library from NPM:

npm install --save @emdgroup/react-auth
# or
yarn add @emdgroup/react-auth

Adding the User Context​

Open your src/index.tsx file (or src/index.jsx if you are not using TypeScript) and change

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

to

import { UserContextProvider } from '@emdgroup/react-auth';

ReactDOM.render(
  <React.StrictMode>
    <UserContextProvider clientId="NbIxOQoWfrXO_SSQofn8kQ">
        <App />
    </UserContextProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

The provided clientId can be used for local development. The supported redirect URLs for this client are http://localhost:3000/auth and http://localhost:8080/auth. If you crated your application using create-react-app or Next.js, then these redirect URLs will work.

That's it! Your application should now redirect any unauthorized users to the EMD Digital log in page. After successful authentication, the user will be redirected back to the application. You can disable the automatic login by adding a autoLogin={false} property to the UserContextProvider. You can then manually control when the login flow is initiated by calling the login() function provided by the useUser hook.

Using the useUser hook​

You can use the useUser hook anywhere within your application to get information about the current user session.

import { useUser } from '@emdgroup/react-auth';

function App() {
    const { info, logout, login, authHeader } = useUser();
    // the info object is only available after the user has been authenticated
    return (<p>Email: {info?.email}</p>});
}

Making API requests​

The authentication flow provides the web application with an access token that can be used to authenticate the user against a backend service (GraphQL, REST, etc). Here is a primitive useApi hook that will incorporate the access token provided by useUser.

caution

This an extremely simplified implementation and lacks proper error handling, retry logic, caching and other features.

import { useEffect, useState } from 'react';
import { useUser } from '@emdgroup/react-auth';

function useApi(method: string, url: string, body?: any) {
    const { authHeader } = useUser();
    const [response, setResponse] = useState();

    useEffect(() => {
        if (!authHeader) return;
        fetch(url, {
            method,
            headers: authHeader,
            body,
        }).then((res) => res.json().then(setResponse))
    }, [authHeader, method, url, body]);

    return { response };
}

In your code, you then make API requests like this:

function Pets() {
    const { response: pets } = useApi('GET', 'https://api.my-api.com/pets');

    return (
        pets?.map(pet => (<p>{pet.name}</p>))
    );
}

Usage with Next.js​

The library is compatible with Next.js and will not get in the way. When building the application with Next.js, the static parts of you application will be rendered as if no user was logged in.