Introduction

Amazon Cognito lets you add user sign-up, sign-in, and access control to your web and mobile apps quickly and easily. Amazon Cognito scales to millions of users and supports sign-in with social identity providers, such as Apple, Facebook, Google, and Amazon, and enterprise identity providers via SAML 2.0 and OpenID Connect.

Quick start

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

1. Enable AuthProvider

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

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

2. Enable useAuth hook

Enable Amazon Cognito's useAuth hook in /src/hooks/useAuth.ts.

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

How to use

Learn how to use Cognito 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>
  );
};