Build custom sign-in and sign-up authentication flows with Clerk's useSignIn and useSignUp hooks. Use this skill when the user asks to build sign-in or sign-up flows using Clerk, or when JavaScript/TypeScript files reference the hooks useSignIn or useSignUp.
Clerk, an authentication and user management product, allows users to build completely custom UI using Clerk's useSignIn() and useSignUp() hooks. This skill helps provide reference material including API documentation along with sample code.
Reference material is contained within the reference folder. The first file listed files below contain generally applicable reference, whereas the remaining files are specific to the flow the user wants to implement.
Keep in mind that while the examples are specifc to Next.js, they can be adjusted to the specific React framework being used by the user. Make sure that navigation actions are using the router that the user's application uses. Furthermore, while the examples use plain unstyled HTML, ensure the code you write uses the styling system in use by the user's application if applicable.
| Title | Description |
|---|---|
SignInFutureThe current active SignIn instance, for use in custom flows. |
SignUpFuture | The current active SignUp instance, for use in custom flows. |
| useSignIn() | Access and manage the current user's sign-in state in your React application with Clerk's useSignIn() hook. |
| useSignUp() | Access and manage the current user's sign-up state in your React application with Clerk's useSignUp() hook. |
| Build your own UI (custom flows) | Learn the process behind building custom sign-up and sign-in flows with Clerk. |
| Sign-in-or-up custom flow | Learn how to handle a combined sign-up and sign-in flow in your application. |
| Build a custom email/password authentication flow | Learn how to build a custom email/password sign-up and sign-in flow using the Clerk API. |
| Build a custom email or SMS OTP authentication flow | Learn how build a custom email or SMS one time code (OTP) authentication flow using the Clerk API. |
| Build a custom sign-in flow with multi-factor authentication | Learn how to build a custom email/password sign-in flow that requires multi-factor authentication (MFA). |
| Build a custom authentication flow using passkeys | Learn how to use the Clerk API to build a custom authentication flow using passkeys. |
| Build a custom flow for authenticating with OAuth connections | Learn how to use the Clerk API to build a custom sign-up and sign-in flow that supports OAuth connections. |
| Build a custom flow for authenticating with enterprise connections | Learn how to use the Clerk API to build a custom sign-up and sign-in flow that supports enterprise connections. |
| Sign-up with application invitations | Learn how to use the Clerk API to build a custom flow for handling application invitations. |
Errors | An interface that represents the errors that occurred during the last API request, for use in custom flows. |
ClerkError | Type used for all errors generated by the Clerk SDK. |
ClerkAPIResponseError | An interface that represents an error returned by the Clerk API. |
ClerkAPIError | An interface that represents an error returned by the Clerk API. |
Verification | An interface that represents the state of the verification process of a sign-in or sign-up attempt. |
Session object | The Session object is an abstraction over an HTTP session. It models the period of information exchange between a user and the server. |
SignInFirstFactor | The SignInFirstFactor type represents the first factor verification strategy that can be used in the sign-in process. |
SignInSecondFactor | The SignInSecondFactor type represents the second factor verification strategy that can be used in the sign-in process. |
| SSO Types | Types related to SSO providers and strategies. |