auth.js logic

Author: maslianok

auth.ts

@@ -5,37 +5,115 @@ import NextAuth from 'next-auth';
 import authConfig from './auth.config';
 import mongoClientPromise from './lib/mongo-client';
 
+// database but jwt ¯\_(ツ)_/¯
+// https://authjs.dev/guides/edge-compatibility#middleware
+
 export const { handlers, signIn, signOut, auth } = NextAuth({
   adapter: MongoDBAdapter(mongoClientPromise),
   session: { strategy: 'jwt' },
   ...authConfig,
   events: {
-    signIn: async ({ account, user, profile, isNewUser }) => {
-      if (isNewUser && account?.provider === 'github') {
+    signIn: async ({ account, user, profile }) => {
+      // profile - user entity from github
+      // user - user entity from the database
+      // account - OAuth account information
+
+      if (account) {
         const client = await mongoClientPromise;
-        const db = client.db('auth');
-
-        await db
-          .collection('accounts')
-          .updateOne(
-            { userId: new ObjectId(user.id) },
-            { $set: { githubId: profile?.node_id, githubLogin: profile?.login } },
-          );
+        const db = client.db('auth').collection('accounts');
+
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const { expires_in, refresh_token_expires_in, ...accountData } = account;
+
+        await db.updateOne(
+          { userId: new ObjectId(user.id), provider: 'github' },
+          { $set: { ...accountData, githubId: profile?.node_id, githubLogin: profile?.login } },
+        );
       }
     },
   },
   callbacks: {
     async jwt({ token, profile, account }) {
-      if (profile && account?.provider === 'github') {
-        token.githubLogin = profile.login;
+      // token:   the existing token (an object you can modify)
+      // user:    only present on first sign-in (the returned user object)
+      // account: only on first sign-in (OAuth/account info)
+      // profile: only on first sign-in (OAuth profile)
+      // isNewUser: boolean flag on first sign-in
+
+      token.error = undefined;
+
+      if (account && profile) {
+        // First-time login, save the `access_token`, its expiry and the `refresh_token`
+        return {
+          ...token,
+          access_token: account.access_token,
+          expires_at: account.expires_at,
+          refresh_token: account.refresh_token,
+          githubLogin: profile.login,
+        };
+      } else if (Date.now() < (token.expires_at as number) * 1000) {
+        // Subsequent logins, but the `access_token` is still valid
+        return token;
+      }
+
+      // Subsequent logins, but the `access_token` has expired, try to refresh it
+      if (!token.refresh_token) {
+        throw new TypeError('Missing refresh_token');
+      }
+
+      try {
+        const response = await fetch('https://github.com/login/oauth/access_token', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/x-www-form-urlencoded',
+            Accept: 'application/json',
+          },
+          body: new URLSearchParams({
+            client_id: process.env.AUTH_GITHUB_ID!,
+            client_secret: process.env.AUTH_GITHUB_SECRET!,
+            grant_type: 'refresh_token',
+            refresh_token: token.refresh_token as string,
+          }),
+        });
+
+        const tokensOrError = await response.json();
+
+        if (!response.ok) {
+          throw tokensOrError;
+        }
+
+        const newTokens = tokensOrError as {
+          access_token: string;
+          expires_in: number;
+          refresh_token?: string;
+        };
+
+        const newData = {
+          access_token: newTokens.access_token,
+          expires_at: Math.floor(Date.now() / 1000 + newTokens.expires_in),
+          refresh_token: newTokens.refresh_token,
+        };
+
+        const client = await mongoClientPromise;
+        const db = client.db('auth').collection('accounts');
+
+        await db.updateOne({ githubLogin: token.githubLogin, provider: 'github' }, { $set: newData });
+
+        return { ...token, ...newData };
+      } catch {
+        // If we fail to refresh the token, return an error so we can handle it on the page
+        token.error = 'RefreshTokenError';
+        return token;
       }
-      return token;
     },
 
     async session({ session, token }) {
-      if (token?.githubLogin) {
-        session.user.githubLogin = token.githubLogin as string;
-      }
+      // session: what will be returned to the client
+      // token:   the latest JWT (as returned by your jwt() callback)
+      // user:    database user (if you’re using a database session strategy)
+
+      session.error = token.error as string | undefined;
+      session.user.githubLogin = token.githubLogin as string;
       return session;
     },
   },

components/signin-button/signin-button.tsx

@@ -7,11 +7,14 @@ import { signIn, signOut, useSession } from 'next-auth/react';
 import { getInitials } from '@/utils/get-initials';
 
 import { Button } from '../ui/button';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '../ui/dialog';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '../ui/dropdown-menu';
 
 export default function SigninButton() {
   const { data: session } = useSession();
 
+  console.log('session', session);
+
   return (
     <div>
       {session ? (
@@ -34,6 +37,23 @@ export default function SigninButton() {
           <LogIn className="size-4" />
         </Button>
       )}
+
+      <Dialog open={session?.error === 'RefreshTokenError'}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Oops, Token Timeout!</DialogTitle>
+            <DialogDescription>
+              Your GitHub access token decided to take a break. Sign in again to get back to business.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button type="button" variant="secondary" onClick={() => signOut()}>
+              Maybe later
+            </Button>
+            <Button onClick={() => signIn('github')}>Sign in again</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }

types/next-auth.d.ts

@@ -6,6 +6,7 @@ declare module 'next-auth' {
   }
 
   interface Session extends DefaultSession {
+    error?: string;
     user: {
       githubLogin?: string;
     } & DefaultSession['user'];
@@ -14,6 +15,10 @@ declare module 'next-auth' {
 
 declare module 'next-auth/jwt' {
   interface JWT extends DefaultJWT {
+    error?: string;
+    access_token?: string;
+    expires_at?: number;
+    refresh_token?: string;
     githubLogin?: string;
   }
 }