Introduction

JSON web token (JWT) is an open standard that defines a compact and self-contained way for securely transmitting information between parties as a JSON object.

Quick start

Follow these steps if you want to enable JWT authentication in your application.

1. Enable AuthProvider

Enable JWT's AuthProvider in /src/pages/_app.tsx.

import { AuthProvider } from "./contexts/JWTContext";
        
function App() {
  return (
    <AuthProvider>
      {content}
    </AuthProvider>;
  )
}

2. Enable useAuth hook

Enable JWT's useAuth hook in /src/hooks/useAuth.ts.

import { AuthContext } from "../contexts/JWTContext";
        
const useAuth = () => {
  return useContext(AuthContext);
};

How to use

Learn how to use JWT authentication. There are multiple examples included, including sign in, sign up and sign out.

Retrieve user info

import useAuth from '../hooks/useAuth';

const App = () => {
  const { displayName } = useAuth();

  return (
    <span>
      {user.displayName}
    </span>
  );
};

Execute actions

import useAuth from '../hooks/useAuth';

const App = () => {
  const { signIn } = useAuth();

  return (
    <button onClick={() => signIn()}>
      Sign in
    </button>
  );
};