Auth Pages

Auth Pages module handles user authentication, including sign-in, sign-up, password reset. It allows users to sign in using Google, X (Twitter), or GitHub. This way you can check if that a user is who they say they are. You can easily customize styling of this module to fit your needs.

Features

📏 Form validation with Zod and React Hook Form

🖌️ Basic theming support using SCSS modules

💖 Integration with Supabase for authentication

🔒 Captcha verification with HCaptcha

Screenshots

Auth Pages
Auth Pages
Auth Pages
Auth Pages
Auth Pages
Auth Pages
Auth Pages
Auth Pages

What's Included

This module comes with various components: Captcha, Reset password, Sign-in, Sign-up, GitHub auth button, Google auth button, X (Twitter) auth button, UpdatePassword component.

< AuthLayout />

This component serves as the main component of the module. To use the AuthLayout component, simply import it and wrap it around the content of your authentication-related pages.

Props and Properties

You can customize AuthLayout component by giving the following props:

NameTypeDefaultDescription
defaultConfigobjectConfiguration object
childrenReactNodeChildren of the AuthLayout

defaultConfig prop can be configured with the following properties:

NameTypeDefaultDescription
isSideActivebooleanfalseDetermines if the side panel is active
isReversebooleanfalseDetermines if the layout should be reversed
smallSizebooleanfalseSets the layout to a smaller size
isMiddlebooleanfalseCenters the layout
withImagebooleanfalseIncludes an image in the layout

< Captcha />

The Captcha component handles captcha verification using HCaptcha. This widget can protect your applications from bots, spam, and other forms of automated abuse. It uses the site's HCaptcha site key from environment variables and uses default browser settings for theming (light/dark).

< SignIn />

The SignIn component allows users to sign in with their email and password. It includes Captcha Component for human verification and uses Supabase for authentication. Also handles correct data formatting using Zod.

< SignUp />

The SignUp component allows users to sign up with their email and password, agree to the terms and conditions, and optionally subscribe to a newsletter. It includes captcha verification and uses Supabase for authentication. Includes XAuthButton, GithubAuthButton and GoogleAuthButton components to serve an effective sign up method to the users.

OAuth Buttons

< GithubAuthButton />

< GoogleAuthButton />

< XAuthButton />

The components allow users to sign in using OAuth providers like GitHub, Google, and X (Twitter).

< UpdatePassword />

The UpdatePassword component allows users to update their password. It uses Supabase for updating the user's password.

< ResetPassword />

The ResetPassword component allows users to reset their password by entering their email and completing a CAPTCHA verification. It uses Supabase for the password reset functionality.

Set Up Module's Needs

Configure Environment Variables

  • Follow these steps to setup Supabase:
  1. Create a .env.local file in the root directory of your project and add the following environment variables:
NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
NEXT_PUBLIC_HCAPTCHA_SITE_KEY=your-hcaptcha-site-key

  1. Head over to Database and create a new Supabase project. Your new database has a table for storing your users.

  2. Populate your your project's URL and Anon Key. Place your new URL and anon key into the NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY fields in the .env file.

For more information on setting up and configuring Supabase, refer to the Supabase documentation._

  • Follow these steps to setup HCaptcha:
  1. Create a .env.local file in the root directory of your project and add the following environment variables:
`NEXT_PUBLIC_HCAPTCHA_SITE_KEY=your-hcaptcha-site-key`
  1. You will need to sign up for an account with HCaptcha to obtain your site key
  2. Signup or login on theHCaptcha Dashboard
  3. Go to theSitestab in the dashboard and create a new sitekey.
  4. Go to theSettings tab in the dashboard and generate your secret key by clicking Generate New Secret.
  5. Copy and paste your secret key into the NEXT_PUBLIC_HCAPTCHA_SITE_KEY field