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 handleNavigationEvents option 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

NameTypeDescription
onLoggedIncallback functionThis 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).
handleNavigationEventsbooleanIf 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 refresh page.

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.).