User Authentication 🔐

Nextfast uses NextAuth v5 to authenticate users. You can configure it in the auth.ts & auth.config.ts file.

Currently Nextfast comes up with pre configured Magic Links & Google Oauth check the auth.config.ts and all necessary required ENVIRONMENT variables google auth and magic link.

Login Form Component

Navigate to your directory: components/login/login-form.tsx. The login form calling the login action to perform the user authentication.

components/login/login-form.tsx:

components/login/login-form.tsx

"use client";

import { useState } from "react";
import { Fragment } from "react";

import { Input } from "@lemonsqueezy/wedges";
import TextDivider from "@/components/divider/text-divider";
import { MdEmail } from "react-icons/md";
import GoogleIcon from "@/components/icons/google";
import { SubmitButton } from "../submit-button";
import { login } from "@/app/actions/lemonsqueezy/login";
import { toast } from "sonner";

export default function LoginForm() {
  const [email, setEmail] = useState("");

  const handleLogin = async () => {
    if (email) {
      // If email is provided, sign in with email
      const res = await login({ provider: "email", email });
      if (res) {
        setEmail("")
        toast.success("Check your email for the sign-in link");
      } else {
        toast.error("Something went wrong, contact your administrator");
      }
    } else {
      // If no email is provided, sign in with Google
      await login({ provider: "google" });
    }
  };

  const handleEmailChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
    const target = e.target as HTMLInputElement;
    setEmail(target.value);
  };

  return (
    <Fragment>
      <form
        className="pt-2"
        action={async () => {
          await handleLogin();
        }}
      >
        <div className="mb-4">
          <label className="text-md">Email address</label>
          <Input
            type="email"
            required
            value={email}
            onChange={handleEmailChange as any}
            placeholder="johndoe@gmail.com"
            className="w-full mt-2"
          />
          <SubmitButton
            before={<MdEmail />}
            className="py-2.5 px-3 w-full inline-flex justify-center items-center gap-x-2 text-md font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none mt-4"
            shape="pill"
            variant="primary"
            disabled={!email}
          >
            Sign in with email
          </SubmitButton>
        </div>

        <TextDivider>Or continue with</TextDivider>
        <SubmitButton
          before={<GoogleIcon />}
          className="py-2.5 px-3 w-full inline-flex justify-center items-center gap-x-2 text-md font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none"
          shape="pill"
          variant="primary"
          onClick={handleLogin}
        >
          Sign in with Google
        </SubmitButton>
      </form>
    </Fragment>
  );
}

Login Page

Navigate to your directory: app/login/page.tsx. Login page import the login component mentioned above to render the form to the page.

app/login/page.tsx:

app/login/page.tsx

import HeaderDefault from "@/components/header/header-default";
import { Fragment } from "react";
import FooterCenter from "@/components/footer/footer-center";

import LoginForm from "@/components/login/login-form";

export default function Login() {
  return (
    <Fragment>
      <HeaderDefault />
      <div className="h-screen flex flex-col items-center justify-center">
        <main className="max-w-md mx-auto space-y-2 text-center lg:text-start">
          <h1 className="text-balance text-2xl text-surface-900 font-bold lg:text-3xl">
            Sign in to nextfast.
          </h1>

          <p className="text-balance text-md text-surface-500">
            Use your email address to sign in
          </p>

          <LoginForm />
        </main>
      </div>
      <FooterCenter />
    </Fragment>
  );
}