feat(web): add registration, sign up function

Author: izzyyhh

web/src/app/api/auth/[...nextauth]/route.ts

@@ -1,23 +1,7 @@
 import CredentialsProvider from "next-auth/providers/credentials";
 import NextAuth from "next-auth/next";
 import { signIn } from "@/lib/strapi/auth";
-
-type StrapiResponse = {
-	jwt: string;
-	user: {
-		id: number;
-		username: string;
-		email: string;
-		provider: string;
-		confirmed: boolean;
-		blocked: boolean;
-		createdAt: string;
-		updatedAt: string;
-	};
-	error?: {
-		details: string[];
-	};
-};
+import { StrapiSignInResponse } from "@/lib/types";
 
 const authOptions = {
 	secret: process.env.NEXTAUTH_SECRET,
@@ -29,10 +13,11 @@ const authOptions = {
 				password: { label: "Password", type: "password" },
 			},
 			async authorize(credentials) {
+				console.log("heee");
 				try {
 					if (credentials?.email == null || credentials.password == null) return null;
 
-					const strapiResponse: StrapiResponse = await signIn(credentials.email, credentials.password);
+					const strapiResponse: StrapiSignInResponse = await signIn(credentials.email, credentials.password);
 
 					if (strapiResponse.error) {
 						return null;
@@ -44,7 +29,8 @@ const authOptions = {
 						email: strapiResponse.user.email,
 						name: strapiResponse.user.username,
 					};
-				} catch {
+				} catch (e) {
+					console.log(e);
 					return null;
 				}
 			},

web/src/app/registration/page.tsx

@@ -1,7 +1,9 @@
 "use client";
-import { ChangeEvent, useState } from "react";
+import { ChangeEvent, FormEvent, useState } from "react";
 import { getMailValidation } from "@/helpers/validators";
 import Input from "@/components/Inputs/TextInput";
+import { signUp, signUpApi } from "@/lib/strapi/auth";
+import { signIn, useSession } from "next-auth/react";
 
 type RegistrationFormData = {
 	username: string;
@@ -13,6 +15,7 @@ type RegistrationFormData = {
 };
 
 export default function Registration() {
+	const { data: session } = useSession();
 	const [formData, setFormData] = useState<RegistrationFormData>({
 		username: "",
 		firstname: "",
@@ -22,6 +25,8 @@ export default function Registration() {
 		passwordConfirm: "",
 	});
 
+	const [errorMessage, setErrorMessage] = useState("");
+
 	const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
 		const { name, value } = e.target;
 		setFormData(prevFormData => ({ ...prevFormData, [name]: value }));
@@ -36,12 +41,28 @@ export default function Registration() {
 		<div>
 			<h1 className="h3">My Account</h1>
 			<div className="grid grid-cols-1 xl:grid-cols-2 xl:gap-8">
-				<form className="flex flex-col items-stretch gap-4">
+				<form
+					className="flex flex-col items-stretch gap-4"
+					onSubmit={async (e: FormEvent<HTMLFormElement>) => {
+						e.preventDefault();
+						console.log("submit");
+						console.log("err");
+						const registerresp = await signUp(formData.username, formData.email, formData.password);
+						if (registerresp.error) {
+							console.log(registerresp.error.message);
+							setErrorMessage(registerresp.error.message);
+							return;
+						}
+						console.log(registerresp);
+						const res = await signIn("credentials", { email: formData.email, password: formData.password, redirect: false });
+						console.log(res);
+					}}
+				>
 					<Input type="text" label="Username" name="username" id="username" value={formData.username} onChange={handleInputChange} required />
-					<div className="grid grid-cols-1 xl:grid-cols-2 xl:gap-3">
+					{/* <div className="grid grid-cols-1 xl:grid-cols-2 xl:gap-3">
 						<Input type="text" label="First Name" name="firstname" id="firstname" value={formData.firstname} onChange={handleInputChange} required />
 						<Input type="text" label="Last Name" name="lastname" id="lastname" value={formData.lastname} onChange={handleInputChange} required />
-					</div>
+					</div> */}
 					<Input
 						type="text"
 						label="Email Address"
@@ -66,8 +87,9 @@ export default function Registration() {
 					<input className="btn ml-auto hover:cursor-pointer" type="submit" value="Register" />
 				</form>
 				<div>
+					{errorMessage != "" && <h2 className="text-secondary">{errorMessage}</h2>}
 					<h2 className="text-secondary">Please note</h2>
-
+					{session?.user && <h2 className="text-secondary">{session.user.name}</h2>}
 					<p>
 						Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel est adipisci quas, aperiam voluptas, omnis tempora blanditiis quae fuga eum ullam
 						commodi a perspiciatis provident pariatur sunt excepturi doloremque! Commodi!

web/src/config/constants.ts

@@ -1 +1,2 @@
-export const CMS_API_URL = process.env.CMS_API ?? "http://cms:1337/api";
+export const CMS_PUBLIC_API_URL = process.env.CMS_PUBLIC_API_URL ?? "http://localhost:1337/api";
+export const CMS_INTERNAL_API_URL = process.env.CMS_INTERNAL_API_URL ?? "http://cms:1337/api";

web/src/lib/strapi/auth.ts

@@ -1,8 +1,8 @@
-import { CMS_API_URL } from "@/config/constants";
+import { CMS_PUBLIC_API_URL, CMS_INTERNAL_API_URL } from "@/config/constants";
 
 export const signIn = async (email: string, password: string) => {
 	try {
-		const response = await fetch(`${CMS_API_URL}/auth/local`, {
+		const response = await fetch(`${CMS_INTERNAL_API_URL}/auth/local`, {
 			method: "POST",
 			headers: {
 				"Content-Type": "application/json",
@@ -12,9 +12,34 @@ export const signIn = async (email: string, password: string) => {
 				password: password,
 			}),
 		});
+		console.log("signin");
+		return await response.json();
+	} catch (e) {
+		console.log(e);
+		return null;
+	}
+};
+
+export const signUp = async (username: string, email: string, password: string) => {
+	try {
+		const response = await fetch(`${CMS_PUBLIC_API_URL}/auth/local/register`, {
+			method: "POST",
+			headers: {
+				"Content-Type": "application/json",
+				Accept: "application/json",
+			},
+			body: JSON.stringify({
+				username: username,
+				email: email,
+				password: password,
+			}),
+		});
+		console.log(response);
 
 		return await response.json();
-	} catch {
+	} catch (e) {
+		console.log("something went wrong");
+		console.log(e);
 		return null;
 	}
 };

web/src/lib/types.ts

@@ -0,0 +1,22 @@
+export type StrapiSignInResponse = {
+	jwt: string;
+	user: {
+		id: number;
+		username: string;
+		email: string;
+		provider: string;
+		confirmed: boolean;
+		blocked: boolean;
+		createdAt: string;
+		updatedAt: string;
+	};
+	error?: {
+		details: string[];
+	};
+};
+
+export type SignUpPayload = {
+	username: string;
+	email: string;
+	password: string;
+};