wip One-click single sign on

Author: Soxasora

components/nav/common.js

@@ -12,7 +12,7 @@ import NoteIcon from '../../svgs/notification-4-fill.svg'
 import { useMe } from '../me'
 import { abbrNum } from '../../lib/format'
 import { useServiceWorker } from '../serviceworker'
-import { signOut } from 'next-auth/react'
+import { signIn, signOut } from 'next-auth/react'
 import Badges from '../badge'
 import { randInRange } from '../../lib/rand'
 import { useLightning } from '../lightning'
@@ -248,18 +248,45 @@ export function SignUpButton ({ className = 'py-0', width }) {
 
 export default function LoginButton () {
   const router = useRouter()
-  const handleLogin = useCallback(async pathname => await router.push({
-    pathname,
-    query: { callbackUrl: window.location.origin + router.asPath }
-  }), [router])
+
+  useEffect(() => {
+    if (router.query.type === 'sync') {
+      console.log('signing in with sync')
+      console.log('token', router.query.token)
+      console.log('callbackUrl', router.query.callbackUrl)
+      signIn('sync', { token: router.query.token, callbackUrl: router.query.callbackUrl, redirect: false })
+    }
+  }, [router.query.type, router.query.token, router.query.callbackUrl])
+
+  const handleLogin = useCallback(async () => {
+    // todo: custom domain check
+    const mainDomain = process.env.NEXT_PUBLIC_URL.replace(/^https?:\/\//, '')
+    const isCustomDomain = window.location.hostname !== mainDomain
+
+    if (isCustomDomain && router.query.type !== 'noAuth') {
+      // TODO: dirty of previous iterations, refactor
+      // redirect to sync endpoint on main domain
+      const protocol = window.location.protocol
+      const mainDomainUrl = `${protocol}//${mainDomain}`
+      const currentUrl = window.location.origin + router.asPath
+
+      window.location.href = `${mainDomainUrl}/api/auth/sync?redirectUrl=${encodeURIComponent(currentUrl)}`
+    } else {
+      // normal login on main domain
+      await router.push({
+        pathname: '/login',
+        query: { callbackUrl: window.location.origin + router.asPath }
+      })
+    }
+  }, [router])
 
   return (
     <Button
       className='align-items-center px-3 py-1'
       id='login'
       style={{ borderWidth: '2px', width: '150px' }}
       variant='outline-grey-darkmode'
-      onClick={() => handleLogin('/login')}
+      onClick={handleLogin}
     >
       login
     </Button>

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

@@ -274,6 +274,38 @@ const getProviders = res => [
       return await pubkeyAuth(credentials, req, res, 'nostrAuthPubkey')
     }
   }),
+  CredentialsProvider({
+    id: 'sync',
+    name: 'Auth Sync',
+    credentials: {
+      token: { label: 'token', type: 'text' }
+    },
+    authorize: async ({ token }, req) => {
+      try {
+        const verificationToken = await prisma.verificationToken.findUnique({ where: { token } })
+        if (!verificationToken) return null
+
+        // has to be a sync token
+        if (!verificationToken.identifier.startsWith('sync:')) return null
+
+        // sync has user id
+        const userId = parseInt(verificationToken.identifier.split(':')[1], 10)
+        if (!userId) return null
+
+        // delete the token to prevent reuse
+        await prisma.verificationToken.delete({
+          where: { id: verificationToken.id }
+        })
+        if (new Date() > verificationToken.expires) return null
+
+        // return the user
+        return await prisma.user.findUnique({ where: { id: userId } })
+      } catch (error) {
+        console.error('auth sync error:', error)
+        return null
+      }
+    }
+  }),
   GitHubProvider({
     clientId: process.env.GITHUB_ID,
     clientSecret: process.env.GITHUB_SECRET,
@@ -431,7 +463,7 @@ export default async (req, res) => {
   await NextAuth(req, res, getAuthOptions(req, res))
 }
 
-function generateRandomString (length = 6, charset = BECH32_CHARSET) {
+export function generateRandomString (length = 6, charset = BECH32_CHARSET) {
   const bytes = randomBytes(length)
   let result = ''
 

pages/api/auth/sync.js

@@ -1,85 +1,38 @@
 import { getServerSession } from 'next-auth/next'
-import { getAuthOptions } from './[...nextauth]'
-import { serialize } from 'cookie'
-import { datePivot } from '@/lib/time'
+import { getAuthOptions, generateRandomString } from './[...nextauth]'
+import prisma from '@/api/models'
 
-// TODO: dirty of previous iterations, refactor
-// UNSAFE UNSAFE UNSAFE tokens are visible in the URL
 export default async function handler (req, res) {
-  console.log(req.query)
-  if (req.query.token) {
-    const session = JSON.parse(decodeURIComponent(req.query.token))
-    return saveCookie(req, res, session)
-  } else {
-    const { redirectUrl } = req.query
-    const session = await getServerSession(req, res, getAuthOptions(req))
-    // TODO: use session to create a verification token
-    if (session) {
-      console.log('session', session)
-      console.log('req.cookies', req.cookies)
-
-      const userId = session.user.id
-      const multiAuthCookieName = `multi_auth.${userId}`
-      const multiAuthToken = req.cookies[multiAuthCookieName]
-
-      if (!multiAuthToken) {
-        console.error('No multi_auth token found for user', userId)
-        return res.status(400).json({ error: 'No multi_auth token found' })
-      }
-
-      const transferData = {
-        session,
-        multiAuthToken,
-        userId
-      }
-
-      // redirect back to the custom domain with the token data
-      const callbackUrl = new URL('/api/auth/sync', redirectUrl)
-      callbackUrl.searchParams.set('token', encodeURIComponent(JSON.stringify(transferData)))
-      callbackUrl.searchParams.set('redirectUrl', req.query.redirectUrl || '/')
-
-      return res.redirect(callbackUrl.toString())
-    }
-    return res.redirect(redirectUrl)
+  const { redirectUrl } = req.query
+  if (!redirectUrl) {
+    return res.status(400).json({ error: 'Missing redirectUrl parameter' })
   }
-}
 
-export async function saveCookie (req, res, tokenData) {
-  if (!tokenData) {
-    return res.status(400).json({ error: 'Missing token' })
+  const session = await getServerSession(req, res, getAuthOptions(req, res))
+
+  if (!session) {
+    // TODO: redirect to login page, this goes to login overlapping other paths
+    return res.redirect(redirectUrl + '/login?callbackUrl=' + encodeURIComponent(redirectUrl))
   }
 
   try {
-    const secure = process.env.NODE_ENV === 'development'
-    const expiresAt = datePivot(new Date(), { months: 1 })
-    const cookieOptions = {
-      path: '/',
-      httpOnly: true,
-      secure,
-      sameSite: 'lax',
-      expires: expiresAt
-    }
-    // extract the data from the token
-    const { multiAuthToken, userId } = tokenData
-    console.log('Received session and multi_auth token for user', userId)
-
-    // set the session cookie
-    const sessionCookieName = secure ? '__Secure-next-auth.session-token' : 'next-auth.session-token'
-    // create cookies
-    const sessionCookie = serialize(sessionCookieName, multiAuthToken, cookieOptions)
-    // also set the multi_auth cookie on the custom domain
-    const multiAuthCookie = serialize(`multi_auth.${userId}`, multiAuthToken, cookieOptions)
-    // set the cookie pointer
-    const pointerCookie = serialize('multi_auth.user-id', userId, cookieOptions)
+    const token = generateRandomString()
+    // create a sync token
+    await prisma.verificationToken.create({
+      data: {
+        identifier: `sync:${session.user.id}`,
+        token,
+        expires: new Date(Date.now() + 1 * 60 * 1000) // 1 minute
+      }
+    })
 
-    // set the cookies in the response
-    res.setHeader('Set-Cookie', [sessionCookie, multiAuthCookie, pointerCookie])
+    const customDomainCallback = new URL('/?type=sync', redirectUrl)
+    customDomainCallback.searchParams.set('token', token)
+    customDomainCallback.searchParams.set('callbackUrl', redirectUrl)
 
-    // redirect to the home page or a specified return URL
-    const returnTo = req.query.redirectUrl || '/'
-    return res.redirect(returnTo)
+    return res.redirect(customDomainCallback.toString())
   } catch (error) {
-    console.error('Error processing auth callback:', error)
-    return res.status(500).json({ error: 'Failed to process authentication' })
+    console.error('Error generating token:', error)
+    return res.status(500).json({ error: 'Failed to generate token' })
   }
 }