feat(web): add sign in function, to sign in to strapi

izzyyhh · izzyyhh · commit b6e28dc94151 · 2024-05-07T19:01:53.000+02:00
diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -14,6 +14,7 @@
 	"dependencies": {
 		"@tabler/icons-react": "^2.45.0",
 		"@tanstack/react-table": "^8.11.7",
+		"axios": "^1.6.8",
 		"next": "13.5.6",
 		"next-auth": "^4.24.7",
 		"qs": "^6.11.2",
diff --git a/web/src/app/[...slug]/page.tsx b/web/src/app/[...slug]/page.tsx
@@ -3,11 +3,19 @@ import { getPageContent } from "@/helpers/getPageContent";
 import Card from "@/components/common/Card/Card";
 
 export default async function page({ params }: { params: { slug: string[] } }) {
-	const { page } = await getPageContent(params.slug);
-	return (
-		<div>
-			{/* <h1>{page.pageTitle}</h1> */}
-			<Card data={page}></Card>
-		</div>
-	);
+	try {
+		const { page } = await getPageContent(params.slug);
+		return (
+			<div>
+				{/* <h1>{page.pageTitle}</h1> */}
+				<Card data={page}></Card>
+			</div>
+		);
+	} catch (e) {
+		return (
+			<div>
+				<p>No content defined in CMS.</p>
+			</div>
+		);
+	}
 }
diff --git a/web/src/app/api/auth/[...nextauth]/route.ts b/web/src/app/api/auth/[...nextauth]/route.ts
@@ -1,32 +1,48 @@
-import GithubProvider from "next-auth/providers/github";
 import CredentialsProvider from "next-auth/providers/credentials";
 import NextAuth from "next-auth/next";
+import { signIn } from "@/lib/strapi/auth";
 
 const authOptions = {
+	secret: process.env.NEXTAUTH_SECRET,
 	providers: [
-		GithubProvider({
-			clientId: process.env.GITHUB_ID ?? "",
-			clientSecret: process.env.GITHUB_SECRET ?? "",
-		}),
 		CredentialsProvider({
-			name: "Credentials",
+			name: "Username or Email",
 			credentials: {
-				username: { label: "Username", type: "text", placeholder: "jsmith" },
+				email: { label: "Email", type: "text" },
 				password: { label: "Password", type: "password" },
 			},
 			async authorize(credentials) {
-				const res = await fetch("/your/endpoint", {
-					method: "POST",
-					body: JSON.stringify(credentials),
-					headers: { "Content-Type": "application/json" },
-				});
-				const user = await res.json();
+				try {
+					if (credentials?.email == null || credentials.password == null) return null;
+					const strapiResponse = await signIn(credentials.email, credentials.password);
+					console.log("juhu", strapiResponse);
+					if (strapiResponse.error) {
+						console.error(strapiResponse.error.details);
 
-				if (res.ok && user) return user;
-				else return null;
+						return null;
+					}
+					return strapiResponse;
+				} catch {
+					return null;
+				}
 			},
 		}),
 	],
+	callbacks: {
+		session: async ({ session, token }: { session: any; token: any }) => {
+			session.id = token.id;
+			session.jwt = token.jwt;
+			return Promise.resolve(session);
+		},
+		jwt: async ({ token, user }) => {
+			const isSignIn = user ? true : false;
+			if (isSignIn) {
+				token.id = user.id;
+				token.jwt = user.jwt;
+			}
+			return Promise.resolve(token);
+		},
+	},
 };
 
 const handler = NextAuth(authOptions);
diff --git a/web/src/app/layout.tsx b/web/src/app/layout.tsx
@@ -45,14 +45,10 @@ export default async function RootLayout({ children }: { children: React.ReactNo
 	const session = await getServerSession();
 
 	return (
-		<html lang="en">
-			<body className={firaCode.className}>
-				{pageProps && (
-					<Layout pages={pageProps}>
-						<SessionProvider session={session}>{children}</SessionProvider>
-					</Layout>
-				)}
-			</body>
-		</html>
+		<SessionProvider session={session}>
+			<html lang="en">
+				<body className={firaCode.className}>{pageProps && <Layout pages={pageProps}>{children}</Layout>}</body>
+			</html>
+		</SessionProvider>
 	);
 }
diff --git a/web/src/components/Layout/Navigation/Navigation.tsx b/web/src/components/Layout/Navigation/Navigation.tsx
@@ -1,7 +1,9 @@
 "use client";
 import Link from "next/link";
 import Image from "next/image";
+import { signIn, useSession, signOut } from "next-auth/react";
 import { IconUserCircle } from "@tabler/icons-react";
+import { useEffect } from "react";
 
 type NavigationProps = {
 	menu: Page[];
@@ -17,6 +19,8 @@ export type Page = {
 };
 
 export default function Navigation({ menu }: NavigationProps) {
+	const { data: session } = useSession();
+
 	return (
 		<header className="h-full rounded pt-8 bg-gray-5">
 			<nav className="flex flex-col items-center h-full">
@@ -41,7 +45,8 @@ export default function Navigation({ menu }: NavigationProps) {
 				</ul>
 
 				<div className="group mt-auto mb-8 hover:text-gray-2">
-					<Link className="flex items-center gap-2 text-white group-hover:text-gray-2" href="/my-account">
+					{session && <button onClick={() => signOut()}>Sign out</button>}
+					<Link className="flex items-center gap-2 text-white group-hover:text-gray-2" href="/my-account" onClick={() => signIn()}>
 						<IconUserCircle className="text-white group-hover:text-gray-2" size={40} />
 						My Account
 					</Link>
diff --git a/web/src/config/constants.ts b/web/src/config/constants.ts
@@ -0,0 +1 @@
+export const CMS_API_URL = process.env.CMS_API ?? "http://cms:1337/api";
diff --git a/web/src/lib/strapi/auth.ts b/web/src/lib/strapi/auth.ts
@@ -0,0 +1,20 @@
+import { CMS_API_URL } from "@/config/constants";
+
+export const signIn = async (email: string, password: string) => {
+	try {
+		const response = await fetch(`${CMS_API_URL}/auth/local`, {
+			method: "POST",
+			headers: {
+				"Content-Type": "application/json",
+			},
+			body: JSON.stringify({
+				identifier: email,
+				password: password,
+			}),
+		});
+
+		return await response.json();
+	} catch {
+		return null;
+	}
+};

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export const CMS_API_URL = process.env.CMS_API ?? "http://cms:1337/api";`