Add support for Microsoft 365 authentication using NextAuth.js (#14)

Co-authored-by: Gabriel Majeri <gabriel.majeri6@gmail.com>
UniBuc-DITC · Jan 16, 2024 · f265a72 · f265a72
1 parent 7da65ce
commit f265a72
Show file tree

Hide file tree

Showing 13 changed files with 378 additions and 14 deletions.
diff --git a/.env.development b/.env.development
@@ -0,0 +1,5 @@
+# Tell NextAuth what is our app's canonical URL
+NEXTAUTH_URL=http://localhost:3000
+
+# Configure a secret key for encrypting session tokens
+NEXTAUTH_SECRET=dev
diff --git a/README.md b/README.md
@@ -25,6 +25,14 @@ docker compose up
 
 in this directory.
 
+The app uses [NextAuth.js](https://next-auth.js.org/) to provide support for authentication using [Microsoft Entra ID (formerly Azure AD)](https://www.microsoft.com/en-us/security/business/identity-access/microsoft-entra-id). In development, you have to create a `.env.local` file in the root directory and define the following environment variables:
+
+```
+AZURE_AD_TENANT_ID=<ID of tenant in which app resides>
+AZURE_AD_CLIENT_ID=<client ID of app registration>
+AZURE_AD_CLIENT_SECRET<client secret created for app>
+```
+
 To start a local development server, use:
 
 ```bash
@@ -42,3 +50,15 @@ To check for code issues using [ESLint](https://eslint.org/), run:
 ```bash
 npm run lint
 ```
+
+## Deployment instructions
+
+The following environment variables must be defined for the app to function properly:
+
+```
+NEXTAUTH_URL=<app's canonical base URL>
+NEXTAUTH_SECRET=<cryptographically secure secret key, to be used for encryption>
+AZURE_AD_TENANT_ID=<ID of tenant in which app resides>
+AZURE_AD_CLIENT_ID=<client ID of app registration>
+AZURE_AD_CLIENT_SECRET<client secret created for app>
+```
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "next": "14.0.4",
+    "next-auth": "^4.24.5",
     "next-intl": "^3.4.2",
     "react": "^18",
     "react-dom": "^18"

diff --git a/src/app/[locale]/auth/layout.tsx b/src/app/[locale]/auth/layout.tsx
@@ -0,0 +1,21 @@
+import { NextIntlClientProvider, useMessages } from "next-intl";
+
+type LayoutProps = {
+  children: React.ReactNode;
+  params: {
+    locale: string;
+  };
+};
+
+export default function AuthLayout({
+  children,
+  params: { locale },
+}: LayoutProps) {
+  const messages = useMessages();
+
+  return (
+    <NextIntlClientProvider locale={locale} messages={messages}>
+      {children}
+    </NextIntlClientProvider>
+  );
+}
diff --git a/src/app/[locale]/auth/signin/SignInButton.tsx b/src/app/[locale]/auth/signin/SignInButton.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import { useSearchParams } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { signIn } from "next-auth/react";
+
+function SignInButton() {
+  const t = useTranslations("Auth.SignIn");
+
+  const params = useSearchParams();
+  const error = params.get("error");
+  return (
+    <div className="m-auto gap-7 flex flex-col items-center justify-center mt-20">
+      <button
+        onClick={() => {
+          signIn("azure-ad");
+        }}
+      >
+        {t("buttonLabel")}
+      </button>
+      {error &&
+        (error === "Callback" ? (
+          <p>{t("callbackError")}</p>
+        ) : (
+          <p>{t("otherError")}</p>
+        ))}
+    </div>
+  );
+}
+
+export default SignInButton;
diff --git a/src/app/[locale]/auth/signin/page.tsx b/src/app/[locale]/auth/signin/page.tsx
@@ -0,0 +1,9 @@
+import SignInButton from "./SignInButton";
+
+export default function SignInPage() {
+  return (
+    <div>
+      <SignInButton />
+    </div>
+  );
+}
diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx
@@ -9,15 +9,17 @@ export const metadata: Metadata = {
   description: "Generated by create next app",
 };
 
-export default function RootLayout({
-  children,
-  params: { locale },
-}: {
+type LayoutProps = {
   children: React.ReactNode;
   params: {
     locale: string;
   };
-}) {
+};
+
+export default function RootLayout({
+  children,
+  params: { locale },
+}: LayoutProps) {
   return (
     <html lang={locale}>
       <body className={inter.className}>{children}</body>