SEAS React User Auth

This is hooks-/context-based authentication library for React. It provides AuthWrapper, will fetch the user from the server (or prompt for a login), as well as separate hooks for running that authentication process (useAuthentication), getting a reference to the current user (useCurrentUser), and checking for the presence of a specific group in the user object (useGroupGuard). For typescript, There is also a minimal interface GroupMember that must be implemented by the user object you provide as a type argument to the various components.

It's structured such that the underlying AuthContext is not directly exported to the consuming application, to prevent improper user of context.

Quick Start

GroupMember

Any User class within the application can be used as a type argument in the hooks and wrapper, provided it implements the GroupMember interface. This simply requires an array of strings called memberOf, listing the groups that the User is a member of.

import { GroupMember } from 'react-user-auth';

class User implements GroupMember {
    // required by the interface
    public memberOf: string[];

    // Any other fields can be added as needed
    public name: string;
};

AuthWrapper

You will need to add the AuthWrapper to your application, wrapping any code that will need to access the current authenticated user. The URLs to fetch the current user from the server and to login the current user will need to be provided as props. Upon rendering, the wrapper will attempt to retrieve the current user from the userURL argument. If the endpoint responds with a 401 error, it will then redirect the client to the loginURL. The expectation is that the server will store the user in session after login and redirect the client back to its starting point, where the request to userURL will now be successful.

Under the hood, the current user is stored as a state hook; as such, the initial value of the user will be null until a user is returned from the userURL. Any consumer component will need to verify that the user is not null before attempting to use it.

import { AuthWrapper } from 'react-user-auth';
import { User } from './User';

const App = () => {
    const userURL = 'https://localhost.com/user';
    const loginURL = 'https://localhost.com/login';

    return (
        <AuthWrapper<User> userURL={userURL} loginURL={loginURL}>
            <ConsumerComponent />
        </AuthWrapper>
    );
};

useCurrentUser

Inside of any consumer component, you can call useCurrentUser to get the user defined in the AuthContext. As noted above, this value will be null until a valid user is returned.

import { useCurrentUser } from 'react-user-auth';
import { User } from './User';

const ConsumerComponent = () => {
    const currentUser = useCurrentUser<User>();
    
    if (!!currentUser) {
        return (
            <p>Hello, {currentUser.name}!</p>
        );
    } else {
        return null;
    }
};

useGroupGuard

This is a minimal hook that will simply check for the existence of a group name in the memberOf array of the user currently in context, and return true if it exists, and false if it does not.

import { useGroupGuard } from 'react-user-auth';

const ConsumerComponent = () => {
    const isValidUser = useGroupGuard();
    
    return (
        {isValidUser
        ? (<p>Welcome!</p>)
        : (<p>Go AWay!</p>)}
    );
};

useAuthentication

It's unlikely that this hook will need to be used on its own, but it gets the current logged-in user from the server without using the context. This will run the authentication flow described under AuthWrapper (check for user on server, redirect to login if unauthorized) and return the current user as a state value. The same caveat as above applies: The return value will be null until a valid user is returned.

import { useAuthentication } from 'react-user-auth';
import { User } from './User';

const StandaloneConsumerComponent () => {
    const userURL = 'https://localhost.com/user';
    const loginURL = 'https://localhost.com/login';

    const currentUser = useAuthentication<User>(userURL, loginURL);

    if (!!currentUser) {
        return (
            <p>Hello, {currentUser.name}!</p>
        );
    } else {
        return null;
    };
}