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>
);
}