egutierrez/linkwarden
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fully implemented email authentication

Browse Source
This commit is contained in:
Daniel
2023-07-12 13:26:34 -05:00
committed by GitHub
parent 8513ab7688
commit 0050e14e7f
18 changed files with 520 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/api/auth/[...nextauth].ts
+64 -49
View File
@@ -5,64 +5,80 @@ import { AuthOptions, Session } from "next-auth";
import bcrypt from "bcrypt";
import EmailProvider from "next-auth/providers/email";
import { JWT } from "next-auth/jwt";
import { PrismaAdapter } from "@auth/prisma-adapter";
import { Adapter } from "next-auth/adapters";
import sendVerificationRequest from "@/lib/api/sendVerificationRequest";
import { Provider } from "next-auth/providers";
const providers: Provider[] = [
CredentialsProvider({
type: "credentials",
credentials: {
username: {
label: "Username",
type: "text",
},
password: {
label: "Password",
type: "password",
},
},
async authorize(credentials, req) {
if (!credentials) return null;
const findUser = await prisma.user.findFirst({
where: {
OR: [
{
username: credentials.username.toLowerCase(),
},
{
email: credentials.username.toLowerCase(),
},
],
emailVerified: { not: null },
},
});
let passwordMatches: boolean = false;
if (findUser?.password) {
passwordMatches = bcrypt.compareSync(
credentials.password,
findUser.password
);
}
if (passwordMatches) {
return findUser;
} else return null as any;
},
}),
];
if (process.env.EMAIL_SERVER && process.env.EMAIL_FROM)
providers.push(
EmailProvider({
server: process.env.EMAIL_SERVER,
from: process.env.EMAIL_FROM,
maxAge: 600,
sendVerificationRequest(params) {
sendVerificationRequest(params);
},
})
);
export const authOptions: AuthOptions = {
adapter: PrismaAdapter(prisma) as Adapter,
session: {
strategy: "jwt",
},
providers: [
// EmailProvider({
// server: process.env.EMAIL_SERVER,
// from: process.env.EMAIL_FROM,
// }),
CredentialsProvider({
type: "credentials",
credentials: {
username: {
label: "Username",
type: "text",
},
password: {
label: "Password",
type: "password",
},
},
async authorize(credentials, req) {
if (!credentials) return null;
// const { username, password } = credentials as {
// id: number;
// username: string;
// password: string;
// };
const findUser = await prisma.user.findFirst({
where: {
username: credentials.username.toLowerCase(),
},
});
let passwordMatches: boolean = false;
if (findUser?.password) {
passwordMatches = bcrypt.compareSync(
credentials.password,
findUser.password
);
}
if (passwordMatches) {
return findUser;
} else return null as any;
},
}),
],
providers,
pages: {
signIn: "/login",
},
callbacks: {
session: async ({ session, token }: { session: Session; token: JWT }) => {
console.log(token);
session.user.id = parseInt(token.id as string);
session.user.username = token.username as string;
@@ -70,7 +86,6 @@ export const authOptions: AuthOptions = {
},
// Using the `...rest` parameter to be able to narrow down the type based on `trigger`
jwt({ token, trigger, session, user }) {
console.log(user);
if (trigger === "signIn") {
token.id = user.id;
token.username = (user as any).username;
pages/api/auth/register.ts
+35 -4
View File
@@ -2,6 +2,9 @@ import { prisma } from "@/lib/api/db";
import type { NextApiRequest, NextApiResponse } from "next";
import bcrypt from "bcrypt";
const EmailProvider =
process.env.EMAIL_FROM && process.env.EMAIL_SERVER ? true : false;
interface Data {
response: string | object;
}
@@ -9,6 +12,7 @@ interface Data {
interface User {
name: string;
username: string;
email?: string;
password: string;
}
@@ -18,17 +22,43 @@ export default async function Index(
) {
const body: User = req.body;
if (!body.username || !body.password || !body.name)
const checkHasEmptyFields = EmailProvider
? !body.username || !body.password || !body.name || !body.email
: !body.username || !body.password || !body.name;
if (checkHasEmptyFields)
return res
.status(400)
.json({ response: "Please fill out all the fields." });
const checkIfUserExists = await prisma.user.findFirst({
const tenMinutesAgo = new Date(Date.now() - 10 * 60 * 1000);
// Remove user's who aren't verified for more than 10 minutes
await prisma.user.deleteMany({
where: {
username: body.username.toLowerCase(),
createdAt: {
lt: tenMinutesAgo,
},
emailVerified: null,
},
});
const checkIfUserExists = await prisma.user.findFirst({
where: EmailProvider
? {
OR: [
{ username: body.username.toLowerCase() },
{
email: body.email?.toLowerCase(),
},
],
emailVerified: { not: null },
}
: {
username: body.username.toLowerCase(),
},
});
if (!checkIfUserExists) {
const saltRounds = 10;
@@ -38,12 +68,13 @@ export default async function Index(
data: {
name: body.name,
username: body.username.toLowerCase(),
email: body.email?.toLowerCase(),
password: hashedPassword,
},
});
res.status(201).json({ response: "User successfully created." });
} else if (checkIfUserExists) {
res.status(400).json({ response: "User already exists." });
res.status(400).json({ response: "Username and/or Email already exists." });
}
}
pages/forgot.tsx
+86
View File
@@ -0,0 +1,86 @@
import EmailConfirmaion from "@/components/Modal/EmailConfirmaion";
import SubmitButton from "@/components/SubmitButton";
import { signIn } from "next-auth/react";
import Link from "next/link";
import { useState } from "react";
import { toast } from "react-hot-toast";
interface FormData {
email: string;
}
export default function Forgot() {
const [submitLoader, setSubmitLoader] = useState(false);
const [showConfirmation, setShowConfirmation] = useState(false);
const [form, setForm] = useState<FormData>({
email: "",
});
async function loginUser() {
if (form.email !== "") {
setSubmitLoader(true);
const load = toast.loading("Sending login link...");
const res = await signIn("email", {
email: form.email,
callbackUrl: window.location.origin,
});
setShowConfirmation(true);
toast.dismiss(load);
setSubmitLoader(false);
if (!res?.ok) {
toast.error("Invalid login.");
}
} else {
toast.error("Please fill out all the fields.");
}
}
return (
<>
{showConfirmation && form.email ? (
<EmailConfirmaion email={form.email} />
) : undefined}
<p className="text-xl font-bold text-center text-sky-500 mt-10 mb-3">
Linkwarden
</p>
<div className="p-5 mx-auto flex flex-col gap-3 justify-between sm:w-[28rem] w-80 bg-slate-50 rounded-md border border-sky-100">
<div className="my-5 text-center">
<p className="text-3xl font-bold text-sky-500">Password reset</p>
</div>
<p className="text-sm text-sky-500 w-fit font-semibold">Email</p>
<input
type="text"
placeholder="johnny@example.com"
value={form.email}
onChange={(e) => setForm({ ...form, email: e.target.value })}
className="w-full rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
/>
<p className="text-md text-gray-500">
Make sure to change your password in the profile settings afterwards.
</p>
<SubmitButton
onClick={loginUser}
label="Send Login Link"
className="mt-2 w-full text-center"
loading={submitLoader}
/>
</div>
<div className="flex items-baseline gap-1 justify-center my-3">
<Link href={"/login"} className="block text-sky-500 font-bold">
Go back
</Link>
</div>
</>
);
}
pages/login.tsx
+17 -4
View File
@@ -9,6 +9,8 @@ interface FormData {
password: string;
}
const EmailProvider = process.env.NEXT_PUBLIC_EMAIL_PROVIDER;
export default function Login() {
const [submitLoader, setSubmitLoader] = useState(false);
@@ -43,7 +45,7 @@ export default function Login() {
return (
<>
<p className="text-xl font-bold text-center text-sky-500 my-10">
<p className="text-xl font-bold text-center text-sky-500 mt-10 mb-3">
Linkwarden
</p>
<div className="p-5 mx-auto flex flex-col gap-3 justify-between sm:w-[28rem] w-80 bg-slate-50 rounded-md border border-sky-100">
@@ -54,11 +56,14 @@ export default function Login() {
</p>
</div>
<p className="text-sm text-sky-500 w-fit font-semibold">Username</p>
<p className="text-sm text-sky-500 w-fit font-semibold">
Username
{EmailProvider ? " or Email" : undefined}
</p>
<input
type="text"
placeholder="johnny@example.com"
placeholder="johnny"
value={form.username}
onChange={(e) => setForm({ ...form, username: e.target.value })}
className="w-full rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
@@ -80,12 +85,20 @@ export default function Login() {
loading={submitLoader}
/>
</div>
<div className="flex items-baseline gap-1 justify-center mt-10">
<div className="flex items-baseline gap-1 justify-center my-3">
<p className="w-fit text-gray-500">New here?</p>
<Link href={"/register"} className="block text-sky-500 font-bold">
Sign Up
</Link>
</div>
{EmailProvider && (
<div className="flex items-baseline gap-1 justify-center mb-3">
<p className="w-fit text-gray-500">Forgot your password?</p>
<Link href={"/forgot"} className="block text-sky-500 font-bold">
Send login link
</Link>
</div>
)}
</>
);
}
pages/register.tsx
+66 -25
View File
@@ -1,35 +1,60 @@
import Link from "next/link";
import { useState } from "react";
import { useRouter } from "next/router";
import { toast } from "react-hot-toast";
import SubmitButton from "@/components/SubmitButton";
import { signIn } from "next-auth/react";
import EmailConfirmaion from "@/components/Modal/EmailConfirmaion";
interface FormData {
const EmailProvider = process.env.NEXT_PUBLIC_EMAIL_PROVIDER;
type FormData = {
name: string;
username: string;
email?: string;
password: string;
passwordConfirmation: string;
}
};
export default function Register() {
const router = useRouter();
const [submitLoader, setSubmitLoader] = useState(false);
const [showConfirmation, setShowConfirmation] = useState(false);
const [form, setForm] = useState<FormData>({
name: "",
username: "",
email: EmailProvider ? "" : undefined,
password: "",
passwordConfirmation: "",
});
async function registerUser() {
if (
form.name !== "" &&
form.username !== "" &&
form.password !== "" &&
form.passwordConfirmation !== ""
) {
const checkHasEmptyFields = () => {
if (EmailProvider) {
return (
form.name !== "" &&
form.username !== "" &&
form.email !== "" &&
form.password !== "" &&
form.passwordConfirmation !== ""
);
} else {
return (
form.name !== "" &&
form.username !== "" &&
form.password !== "" &&
form.passwordConfirmation !== ""
);
}
};
const sendConfirmation = async () => {
await signIn("email", {
email: form.email,
redirect: false,
});
};
if (checkHasEmptyFields()) {
if (form.password === form.passwordConfirmation) {
const { passwordConfirmation, ...request } = form;
@@ -48,20 +73,19 @@ export default function Register() {
const data = await response.json();
toast.dismiss(load);
setSubmitLoader(false);
if (response.ok) {
setForm({
name: "",
username: "",
password: "",
passwordConfirmation: "",
});
if (form.email) {
await sendConfirmation();
setShowConfirmation(true);
}
toast.success("User Created!");
router.push("/login");
toast.success(
EmailProvider
? "User Created! Please check you email."
: "User Created!"
);
} else {
toast.error(data.response);
}
@@ -75,7 +99,10 @@ export default function Register() {
return (
<>
<p className="text-xl font-bold text-center my-10 text-sky-500">
{showConfirmation && form.email ? (
<EmailConfirmaion email={form.email} />
) : undefined}
<p className="text-xl font-bold text-center my-10 mb-3 text-sky-500">
Linkwarden
</p>
<div className="p-5 mx-auto flex flex-col gap-3 justify-between sm:w-[28rem] w-80 bg-slate-50 rounded-md border border-sky-100">
@@ -100,12 +127,26 @@ export default function Register() {
<input
type="text"
placeholder="johnny@example.com"
placeholder="john"
value={form.username}
onChange={(e) => setForm({ ...form, username: e.target.value })}
className="w-full rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
/>
{EmailProvider ? (
<>
<p className="text-sm text-sky-500 w-fit font-semibold">Email</p>
<input
type="email"
placeholder="johnny@example.com"
value={form.email}
onChange={(e) => setForm({ ...form, email: e.target.value })}
className="w-full rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
/>
</>
) : undefined}
<p className="text-sm text-sky-500 w-fit font-semibold">Password</p>
<input
@@ -136,8 +177,8 @@ export default function Register() {
loading={submitLoader}
/>
</div>
<div className="flex items-baseline gap-1 justify-center mt-10">
<p className="w-fit text-gray-500">Have an account?</p>
<div className="flex items-baseline gap-1 justify-center my-3">
<p className="w-fit text-gray-500">Already have an account?</p>
<Link href={"/login"} className="block w-min text-sky-500 font-bold">
Login
</Link>