Vue Templates Logo Vue Templates
Auth UI Vue screenshot

Auth UI Vue

Author Avatar Theme by Boluwatife2904
Updated: 2 Aug 2023
43 Stars

Auth UI is a pre-built Vue component for authenticating users with Supabase. It supports custom themes and extensible styles to match your brand and aesthetic.

Github

Categories

Vite Scss Supabase Fullstack

Overview

Supabase Auth UI Vue is an innovative pre-built Vue component designed to streamline user authentication processes. This tool not only enhances application functionality but also beautifully integrates with various branding aesthetics, thanks to its support for custom themes and extensible styles. Developed as an initial foray into open source contributions, this component draws inspiration from Supabase Auth UI for React, making it a familiar yet unique experience for developers looking to enhance their user authentication capabilities.

For anyone seeking to implement a robust authentication system in their Vue applications, Supabase Auth UI Vue offers a practical solution. With its diverse social provider support and flexible styling options, it ensures that developers can provide seamless and visually appealing authentication experiences for users.

Features

  • Custom Themes: Easily adapt the UI to fit your brand with various predefined themes or create your own to match your aesthetic.
  • Social Provider Support: Allow users to authenticate using their favorite social platforms, making the login process more convenient.
  • Flexible Authentication Views: Choose different views for the auth component including sign in, sign up, magic link, forgotten password, or update password.
  • Responsive Props: Customize the display of social providers (horizontal or vertical) as well as control whether to show email/password fields based on the provider selection.
  • Localization Options: Tailor the text and language of the authentication components, ensuring accessibility for diverse user bases.
  • Event Emissions: Stay informed about authentication status through emitted events, facilitating smoother integration with other parts of your application.
  • Extensible API: Use props to finely tune the behaviour and appearance of the component, allowing for a highly adaptable integration.
  • Redirect Management: Specify the redirect path for various actions such as signing in with a social provider, ensuring a cohesive user experience.