Auth Form Providers Component

The AuthFormProvider component renders third-party sign-in buttons like Google and GitHub. It provides a clean, consistent UI using Tailwind CSS and can be easily reused across your sign-in or sign-up pages. This makes integrating OAuth providers simple and stylish.

Auth Form Providers preview

1. Setup codes

Create a new file components/ui/icons/GoogleIcon.tsx

jsx
import React from "react";

import { cn } from "@/utils/cn";

import GoogleIcon from "../icons/GoogleIcon";

const AuthFormProviders = ({ className }: { className?: string }) => {
  return (
    <div className={cn(className)}>
      <div className="relative">
        <div aria-hidden="true" className="absolute inset-0 flex items-center">
          <div className="w-full border-t border-gray-200" />
        </div>
        <div className="relative flex justify-center text-sm/6 font-medium">
          <span className="bg-white px-6 text-gray-900">Or continue with</span>
        </div>
      </div>
      <div className="mt-3 grid grid-cols-1 gap-4">
        <a
          href="#"
          className="flex w-full items-center justify-center gap-3 rounded-full bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:ring-transparent"
        >
          <GoogleIcon />
          <span className="text-sm/6 font-semibold">Google</span>
        </a>
      </div>
    </div>
  );
};

export default AuthFormProviders;

Create a new file components/ui/Forms/common/AuthFormProvider.tsx and add this code below

jsx
import React from "react";

import GoogleIcon from "@/components/icons/GoogleIcon";
import { cn } from "@/utils/cn";

const AuthFormProviders = ({ className }: { className?: string }) => {
  return (
    <div className={cn(className)}>
      <div className="relative">
        <div aria-hidden="true" className="absolute inset-0 flex items-center">
          <div className="w-full border-t border-gray-200" />
        </div>
        <div className="relative flex justify-center text-sm/6 font-medium">
          <span className="bg-white px-6 text-gray-900">Or continue with</span>
        </div>
      </div>
      <div className="mt-3 grid grid-cols-1 gap-4">
        <a
          href="#"
          className="flex w-full items-center justify-center gap-3 rounded-full bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:ring-transparent"
        >
          <GoogleIcon />
          <span className="text-sm/6 font-semibold">Google</span>
        </a>
      </div>
    </div>
  );
};

export default AuthFormProviders;

2. Usages

We can use this component in both Signin Form and Signup Form for providers authentication

jsx
<Form action="#" className="grid grid-cols-1 gap-y-4">
  ...

  <AuthFormProviders />
</Form>

The UI will be shown like that

Learn more to using AuthFormProvider component in Signin, Signup forms on this link