useSignUp() and useSignIn()
Overview
If our Clerk Hosted Pages and Prebuilt Components don't meet your needs, you can build a fully custom sign-up or sign-in flow using the React hooks useSignUp()
and useSignIn()
respectively.
useSignUp()
The useSignUp()
hook gives you access to the SignUp
object and its available methods in order to build a custom sign-up flow. The SignUp
object will also contain the state of the sign-up attempt that is currently in progress, which gives you the ability to examine all the details and act accordingly.
Usage
Getting access to the SignUp
object from inside one of your components is easy. Note that the useSignUp()
hook can only be used inside a <ClerkProvider/> context.
The following example accesses the SignUp
object to check the current sign-up attempt's status.
1import { useSignUp } from '@clerk/clerk-react';23// Your component must be rendered as a4// descendant of <ClerkProvider />5export default function SignUpStep() {6const { isLoaded, signUp } = useSignUp();78if (!isLoaded) {9// Handle loading state10return null;11}1213return (14<div>15The current sign up attempt status16is {signUp.status}.17</div>18);19}
In a more involved example, we show an approach to create a custom form for registering users, in this case with a Password strategy.
1import { useSignUp } from '@clerk/clerk-react';23// Your component must be rendered as a4// descendant of <ClerkProvider />5export default function SignUpForm() {6const { isLoaded, signUp } = useSignUp();78const handleSubmit = async (event) => {9const formData = new FormData(event.target);10const emailAddress = formData.get('email');11const password = formData.get('password');1213event.preventDefault();1415// Check response for next step16const response = await signUp.create({17emailAddress,18password19});20};2122if (!isLoaded) {23// Handle loading state24return null;25}2627return (28<form onSubmit={handleSubmit}>29<div>30<label htmlFor="email">Email</label>31<input id="email" name="email" type="email" />32</div>33<div>34<label htmlFor="password">Password</label>35<input id="password" name="password" type="password" />36</div>37<button>Sign up</button>38</form>39);40}
useSignIn()
The useSignIn()
hook gives you access to the SignIn
object and its available methods in order to build a custom sign-in flow. The SignIn
object will also contain the state of the sign-in attempt that is currently in progress, which gives you the ability to example all the details and act accordingly.
Usage
Getting access to the SignIn
object from inside one of your components is easy. Note that the useSignIn()
hook can only be used inside a <ClerkProvider/> context.
The following example accesses the SignIn
object to check the current sign-in attempt's status.
import { useSignIn } from '@clerk/clerk-react';// Your component must be rendered as a// descendant of <ClerkProvider />export default function SignInStep() {const { isLoaded, signIn } = useSignIn();if (!isLoaded) {// Handle loading statereturn null;}return (<div>The current sign in attempt statusis {signIn.status}.</div>);}
In a more involved example, we show an approach to create a custom form for signing in users, in this case with a Password strategy.
1import { useSignIn } from '@clerk/clerk-react';23// Your component must be rendered as a4// descendant of <ClerkProvider />5export default function SignInForm() {6const { isLoaded, signIn } = useSignIn();78const handleSubmit = async (event) => {9const formData = new FormData(event.target);10const emailAddress = formData.get('email');11const password = formData.get('password');1213event.preventDefault();1415// Check response for next step16const response = await signIn.create({17identifier: emailAddress,18password,19});20};2122if (!isLoaded) {23// Handle loading state24return null;25}2627return (28<form onSubmit={handleSubmit}>29<div>30<label htmlFor="email">Email</label>31<input id="email" name="email" type="email" />32</div>33<div>34<label htmlFor="password">Password</label>35<input id="password" name="password" type="password" />36</div>37<button>Sign in</button>38</form>39);40}