Azure ad authentication

.env-example

@@ -0,0 +1,7 @@
+api=
+
+AZURE_AD_CLIENT_ID=
+AZURE_AD_CLIENT_SECRET=
+AZURE_AD_TENANT_ID=
+
+NEXTAUTH_URL=http://localhost:3000

.gitignore

@@ -1,3 +1,3 @@
 .next
 node_modules
-.env
+.env.local

package.json

@@ -13,7 +13,7 @@
   "dependencies": {
     "axios": "^0.21.4",
     "next": "^11.1.2",
-    "next-auth": "^4.0.0-beta.2",
+    "next-auth": "^4.0.0-beta.4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },

pages/api/auth/[...nextauth].js

@@ -1,11 +1,34 @@
 import NextAuth from 'next-auth'
-import GithubProvider from 'next-auth/providers/github'
 
 export default NextAuth({
+  // next-auth azure-ad provider wasnt working for me, credit here
+  // https://github.com/nextauthjs/next-auth/discussions/2690
   providers: [
-    GithubProvider({
-      clientId: process.env.GITHUB_ID,
-      clientSecret: process.env.GITHUB_SECRET,
-    }),
+    {
+      id: 'azure-ad',
+      name: 'Azure Active Directory',
+      type: 'oauth',
+      authorization: {
+        url: `https://login.microsoftonline.com/${process.env.AZURE_AD_TENANT_ID}/oauth2/v2.0/authorize?response_mode=query`,
+        params: {
+          scope: 'user.read offline_access',
+        },
+      },
+      token: `https://login.microsoftonline.com/${process.env.AZURE_AD_TENANT_ID}/oauth2/v2.0/token`,
+      userinfo: 'https://graph.microsoft.com/oidc/userinfo',
+      profile(profile) {
+        return {
+          id: profile.sub,
+          ...profile,
+        }
+      },
+      options: {
+        clientId: process.env.AZURE_AD_CLIENT_ID,
+        clientSecret: process.env.AZURE_AD_CLIENT_SECRET,
+      },
+    },
   ],
+  jwt: {
+    signingKey: process.env.JWT_SIGNING_PRIVATE_KEY,
+  },
 })

pages/index.jsx

@@ -2,9 +2,12 @@ import axios from 'axios'
 import { getSession, useSession, signOut } from 'next-auth/react'
 
 export default function App({ message }) {
+  const { data: session } = useSession()
   return (
     <div className="flex flex-col w-screen h-screen justify-center items-center space-y-5">
-      <h1>hello from client!</h1>
+      <h1>
+        hello <span className="text-red-800">{session?.user.name}</span>!
+      </h1>
       <h2>{message}</h2>
       <button
         className="py-2 px-4 rounded-lg bg-red-800 text-gray-50"

pages/landing.jsx

@@ -10,9 +10,9 @@ export default function Landing() {
       </h1>
       <button
         className="py-2 px-4 rounded-lg bg-gray-50 text-gray-800 hover:text-red-800 hover:shadow-white transition"
-        onClick={() => signIn('github')}
+        onClick={() => signIn('azure-ad')}
       >
-        signin with github
+        signin
       </button>
     </div>
   )

yarn.lock

@@ -1755,10 +1755,10 @@ native-url@0.3.4:
   dependencies:
     querystring "^0.2.0"
 
-next-auth@^4.0.0-beta.2:
-  version "4.0.0-beta.2"
-  resolved "https://registry.yarnpkg.com/next-auth/-/next-auth-4.0.0-beta.2.tgz#b4a84c70f7a77a20447352748fa395647441047c"
-  integrity sha512-WuY3T+9NhwZMKlq4y/YOLa1PUl+IgIfIcmhLLCxP7mSsB9b7VrlN5x4AwrY7oymUEFiCjNaLBQ2DU8/Rhhat/Q==
+next-auth@^4.0.0-beta.4:
+  version "4.0.0-beta.4"
+  resolved "https://registry.yarnpkg.com/next-auth/-/next-auth-4.0.0-beta.4.tgz#f69438c92e06da3b9e2331b71f65e58076b13b2e"
+  integrity sha512-1KRkRUenCbtTv2Y1KiuX8e0T+KBKv94Nt8KFv52xnqc1Ye3giy02J03htd2U+O3uE+hnqE44KBUa0GoHn2727g==
   dependencies:
     "@babel/runtime" "^7.14.6"
     futoin-hkdf "^1.3.3"