CorbadoAuth Component
The CorbadoAuth component allows users to create a new account or login.
Introduction
CorbadoAuth serves as a comprehensive solution for user authentication, combining both account creation and login functionalities into a single, streamlined interface.
Seamless Navigation During Authentication
The CorbadoAuth component employs hash-based URLs to ensure a seamless user experience during the authentication process. Here’s how it benefits users:
- Progress Preservation: If a user refreshes the page during sign-up, their progress is maintained. The component automatically resumes the authentication flow at the correct step.
- Flexible Back Navigation: Users can easily navigate back to previous steps in the sign-up process to review or modify information without having to restart from the beginning.
- Direct Screen Access: Users can directly access the sign-up or login screens using
#signup-init(or#register) and#login-init(or#login) in the URL. - Customization: Developers can disable hash-based navigation if needed by setting the
handleNavigationEventsoption to false.
This navigation strategy enhances user experience by providing a seamless interaction flow and reducing the frustration typically associated with losing session data during authentication processes.
Technical Note: Hash-based URLs involve adding a hash symbol (#) followed by a unique identifier to the end of the website’s address. This allows tracking changes within a single page without triggering a full page reload.
API reference
| Name | Type | Description |
|---|---|---|
| onLoggedIn | callback function | This callback function is called whenever a user has been authenticated (i.e., after every login, but also after a sign-up). You can use it to navigate the user to a specific page inside your application (e.g., /home). |
| handleNavigationEvents | boolean | If enabled, the user can navigate between screens during the authentication process. When disabled, the user will leave the authentication process immediately when he navigates back or refreshes the page. |
| initialBlock | signup-init or login-init | Default: signup-init. Allows you to choose which screen the component shows on initialization. |
| autoFocus | boolean | Default: true. If true, the component will automatically focus the first input field when it’s rendered. If false, this behavior is disabled on the signup-init and login-init block. Turning this off can be useful because some browsers automatically scroll to focused input fields. |
This component requires the CorbadoProvider component. Most configuration settings
will be applied there so make sure to check out the available settings of the
Corbado Provider (see your framework’s integration guide for more info).
Customize Styling and Translations
Corbado UI Components can be customized to match your application’s design and language preferences. You can adjust the styling and translations of the components to create a seamless user experience:
Integrate CorbadoAuth Component
You can use one of our many Integration Guides to add the CorbadoAuth component to your application:
Fullstack Integration
Frontend Integration
Didn’t find your framework?
If your project supports JavaScript, you can always use the
VanillaJS UI components, regardless of your tech-stack (e.g. in projects based
on PHP, Python, etc.).