Amplify Auth Hooks

1.0.0 verified Fri May 01 auth: no javascript maintenance

React hooks for AWS Amplify authentication. Version 1.0.0 provides a set of hooks like useAuth, useSignIn, useSignUp, etc., wrapping Amplify Auth operations. Released as a single version with no updates since. Differentiates by offering hook-based API for Amplify Auth, tightly coupled with React lifecycle. Requires @aws-amplify/auth, @aws-amplify/core, amazon-cognito-identity-js, and react as peer dependencies. Ships TypeScript types.

Common errors

error Cannot read property 'amplify' of undefined ↓

cause Amplify not configured or imported

fix

import Amplify from '@aws-amplify/core'; Amplify.configure(awsConfig);

error TypeError: (0 , _auth.useAuth) is not a function ↓

cause Wrong import (default vs named)

fix

import { useAuth } from 'amplify-auth-hooks';

error Uncaught ReferenceError: require is not defined ↓

cause Using CommonJS require in browser bundle

fix

Use ES module import syntax.

Warnings

gotcha Forgot to configure Amplify before using hooks ↓

fix Call Amplify.configure() once at app root.

gotcha Undefined user on first render ↓

fix Use loading state to handle asynchronous auth check.

deprecated Old version only supports class components? ↓

fix Upgrade to latest version for hooks support.

Install

npm install amplify-auth-hooks

yarn add amplify-auth-hooks

pnpm add amplify-auth-hooks

Imports

useAuth

wrong

import useAuth from 'amplify-auth-hooks'

correct

import { useAuth } from 'amplify-auth-hooks'

Named export, not default.

useSignIn

wrong

const { useSignIn } = require('amplify-auth-hooks')

correct

import { useSignIn } from 'amplify-auth-hooks'

CommonJS require works, but prefer ESM.

useSignUp

wrong

import { SignUp } from 'amplify-auth-hooks'

correct

import { useSignUp } from 'amplify-auth-hooks'

Hook name is useSignUp, not SignUp.

Quickstart

Shows basic usage of useAuth hook to get authentication state.

import React from 'react';
import { useAuth } from 'amplify-auth-hooks';

function AuthStatus() {
  const { user, loading, error } = useAuth();

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  if (user) return <div>Welcome, {user.username}</div>;
  return <div>Not logged in</div>;
}

export default AuthStatus;