How do I authenticate a React or Next.js app using REST or GraphQL?

[jacobsfletch]

Update: There's now an official Auth Example that implements the same concepts described below alongside a fully working CMS. Go check it out!

Authenticating with Payload from a React or Next.js app is quite straightforward. To do this, wrap your entire app with this AuthProvider. It will provide the useAuth hook that you can use to easily perform any auth operation from anywhere in your app:

import React, { useState, createContext, useContext, useEffect, useCallback } from 'react';
import { User } from '../../payload-types'; // point this to the auth-enabled collection of your locally generated types

type Login = (args: { email: string; password: string }) => Promise<void>;

type Logout = () => Promise<void>;

type AuthContext = {
  user?: User | null;
  setUser: (user: User | null) => void;
  logout: Logout;
  login: Login;
};

const Context = createContext({} as AuthContext);

export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [user, setUser] = useState<User | null>();

  const login = useCallback<Login>(async (args) => {
    const res = await fetch(`${process.env.NEXT_PUBLIC_CMS_URL}/api/users/login`, {
      method: 'POST',
      body: JSON.stringify(args),
      credentials: 'include',
      headers: {
        'Content-Type': 'application/json',
      },
    });

    if (res.ok) {
      const json = await res.json();
      setUser(json.user);
    } else {
      throw new Error('Invalid login');
    }
  }, []);

  const logout = useCallback<Logout>(async () => {
    const res = await fetch(`${process.env.NEXT_PUBLIC_CMS_URL}/api/users/logout`, {
      method: 'POST',
      credentials: 'include',
    });

    if (res.ok) {
      setUser(null);
    } else {
      throw new Error('There was a problem while logging out.');
    }

  }, []);

  useEffect(() => {
    const fetchMe = async () => {
      const result = await fetch(`${process.env.NEXT_PUBLIC_CMS_URL}/api/users/me`, {
        credentials: 'include',
      }).then((req) => req.json());
      setUser(result.user || null);
    };

    fetchMe();
  }, []);

  return (
    <Context.Provider
      value={{
        user,
        setUser,
        login,
        logout,
      }}
    >
      {children}
    </Context.Provider>
  );
};

type UseAuth<T = User> = () => AuthContext;

export const useAuth: UseAuth = () => useContext(Context);

Initialize the provider by wrapping your entire app like this:

import { AuthProvider } from '../providers/Auth'; // point this to the path of your provider
export const PayloadNextApp: React.FC = () => {
  return (
    <AuthProvider>
      ...
    </AuthProvider>
  )
}

Now you can fire the useAuth hook in any component of your app. Logging in, for instance, might look like this:

const LoginPage: React.FC = () => {
  import { useAuth } from '../../providers/Auth';
  
  const { login } = useAuth();
  
  const onSubmit = useCallback(
    async (data: FormData) => {
      try {
        await login(data);
        // redirect to `/account` here
      } catch (_) {
        setError('There was an error with the credentials provided. Please try again.');
      }
    }, [login]);

  return (
    ... // render a login form here
  )
}

Once authenticated, the user property will be populated in the auth context.

[jacobsfletch]

Related: https://github.com/payloadcms/next-auth-frontend

[jacobsfletch]

If you are using the GraphQL API, here's the same AuthProvider but using the GraphQL API instead:

import React, { useState, createContext, useContext, useEffect, useCallback } from 'react'
import { User } from '../../payload-types'

type Login = (args: { email: string; password: string }) => Promise<void>

type Logout = () => Promise<void>

type AuthContext = {
  user?: User | null
  setUser: (user: User | null) => void
  logout: Logout
  login: Login
}

const Context = createContext({} as AuthContext)

export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [user, setUser] = useState<User | null>()

  const login = useCallback<Login>(async args => {
    const res = await fetch(`${process.env.NEXT_PUBLIC_CMS_URL}/api/graphql`, {
      method: 'POST',
      credentials: 'include',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        query: `mutation {
            loginUser(email: "${args.email}", password: "${args.password}") {
              user {
                email
              }
              exp
            }
          }`,
      }),
    })

    if (res.ok) {
      const { data, errors } = await res.json()
      if (errors) throw new Error(errors[0].message)
      setUser(data?.loginUser?.user)
    } else {
      throw new Error('Invalid login')
    }
  }, [])

  const logout = useCallback<Logout>(async () => {
    const res = await fetch(`${process.env.NEXT_PUBLIC_CMS_URL}/api/graphql`, {
      method: 'POST',
      credentials: 'include',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        query: `mutation {
            logoutUser
          }`,
      }),
    })

    if (res.ok) {
      setUser(null)
    } else {
      throw new Error('There was a problem while logging out.')
    }
  }, [])

  useEffect(() => {
    const fetchMe = async () => {
      const res = await fetch(`${process.env.NEXT_PUBLIC_CMS_URL}/api/graphql`, {
        method: 'POST',
        credentials: 'include',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          query: `query {
            meUser {
              user {
                email
              }
              exp
            }
          }`,
        }),
      })

      if (res.ok) {
        const { data } = await res.json()
        setUser(data?.meUser?.user || null)
      } else {
        throw new Error('There was a problem while logging out.')
      }
    }

    fetchMe()
  }, [])

  return (
    <Context.Provider
      value={{
        user,
        setUser,
        login,
        logout,
      }}
    >
      {children}
    </Context.Provider>
  )
}

type UseAuth<T = User> = () => AuthContext

export const useAuth: UseAuth = () => useContext(Context)