add social login to auth

apps/blog-next/app/api/login/route.ts

@@ -27,11 +27,6 @@ export async function POST(request: Request) {
     })
   }
 
-  const headers = new Headers()
-  for (const cookie of session.cookies) {
-    headers.append('set-cookie', cookie)
-  }
-
   return Response.json(submission.success({
     message: session.emailVerificationRequired
       ? 'Signed in. Verify your email address to continue.'
@@ -40,7 +35,5 @@ export async function POST(request: Request) {
       ? session.emailVerificationRoute ?? '/verify-email'
       : '/admin',
     user: session.user,
-  }), {
-    headers,
-  })
+  }))
 }

apps/blog-next/app/api/logout/route.ts

@@ -1,18 +1,12 @@
 import { logout, user } from '@holo-js/auth'
 
 export async function POST() {
-  const signedOut = await logout()
-  const headers = new Headers()
-  for (const cookie of signedOut.cookies) {
-    headers.append('set-cookie', cookie)
-  }
+  await logout()
 
   return Response.json({
     ok: true,
     authenticated: false,
     message: 'Signed out successfully.',
     user: await user(),
-  }, {
-    headers,
   })
 }

apps/blog-next/app/api/register/route.ts

@@ -28,11 +28,6 @@ export async function POST(request: Request) {
   }
 
   const session = await loginUsing(created)
-  const headers = new Headers()
-  for (const cookie of session.cookies) {
-    headers.append('set-cookie', cookie)
-  }
-
   return Response.json(submission.success({
     message: session.emailVerificationRequired
       ? 'Account created. Check your inbox to verify your email address.'
@@ -43,6 +38,5 @@ export async function POST(request: Request) {
     user: session.user,
   }, 201), {
     status: 201,
-    headers,
   })
 }

apps/blog-next/app/auth/github/callback/route.ts

@@ -0,0 +1,21 @@
+import { redirect } from 'next/navigation'
+import auth from '@holo-js/auth'
+import { callback } from '@holo-js/auth-social'
+
+export function GET(request: Request): Promise<Response> {
+  return handleCallback(request)
+}
+
+async function handleCallback(request: Request): Promise<Response> {
+  const result = await callback('github', request)
+  if (!result.ok) {
+    return Response.json({
+      message: result.message,
+    }, {
+      status: result.status,
+    })
+  }
+
+  await auth.guard(result.guard).loginUsing(result.user)
+  redirect('/admin')
+}

apps/blog-next/app/auth/github/route.ts

@@ -0,0 +1,5 @@
+import { redirect } from '@holo-js/auth-social'
+
+export function GET(request: Request): Promise<Response> {
+  return redirect('github', request)
+}

apps/blog-next/app/auth/google/callback/route.ts

@@ -0,0 +1,21 @@
+import { redirect } from 'next/navigation'
+import auth from '@holo-js/auth'
+import { callback } from '@holo-js/auth-social'
+
+export function GET(request: Request): Promise<Response> {
+  return handleCallback(request)
+}
+
+async function handleCallback(request: Request): Promise<Response> {
+  const result = await callback('google', request)
+  if (!result.ok) {
+    return Response.json({
+      message: result.message,
+    }, {
+      status: result.status,
+    })
+  }
+
+  await auth.guard(result.guard).loginUsing(result.user)
+  redirect('/admin')
+}

apps/blog-next/app/auth/google/route.ts

@@ -0,0 +1,5 @@
+import { redirect } from '@holo-js/auth-social'
+
+export function GET(request: Request): Promise<Response> {
+  return redirect('google', request)
+}

apps/blog-next/app/login/page.tsx

@@ -44,6 +44,11 @@ export default function LoginPage() {
         <p style={{ margin: 0, color: '#94a3b8' }}>Use your email address and password to access the admin area.</p>
       </div>
 
+      <div style={{ display: 'grid', gap: '0.65rem' }}>
+        <a href="/auth/google" style={{ color: '#e5e7eb', textDecoration: 'none' }}>Continue with Google</a>
+        <a href="/auth/github" style={{ color: '#e5e7eb', textDecoration: 'none' }}>Continue with GitHub</a>
+      </div>
+
       <form onSubmit={(event) => { event.preventDefault(); form.submit() }} style={{ display: 'grid', gap: '0.9rem' }}>
         <label style={{ display: 'grid', gap: '0.35rem' }}>
           <span>Email</span>

apps/blog-nuxt/app/pages/login.vue

@@ -32,6 +32,11 @@ const form = useForm(loginForm, {
       <p>Use your email address and password to access the admin area.</p>
     </div>
 
+    <div class="social-links">
+      <a href="/auth/google">Continue with Google</a>
+      <a href="/auth/github">Continue with GitHub</a>
+    </div>
+
     <form class="stack" @submit.prevent="form.submit()">
       <label class="field">
         <span>Email</span>
@@ -72,6 +77,8 @@ const form = useForm(loginForm, {
 .copy p { margin: 0; color: #94a3b8; }
 .stack, .field { display: grid; gap: 0.35rem; }
 .stack { gap: 0.9rem; }
+.social-links { display: grid; gap: 0.65rem; }
+.social-links a { color: #e5e7eb; text-decoration: none; }
 .remember, .links { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
 .error { color: #fca5a5; }
 .success { color: #86efac; }

apps/blog-nuxt/server/api/login.post.ts

@@ -26,8 +26,6 @@ export default defineEventHandler(async (event) => {
     }
   }
 
-  event.node.res.setHeader('set-cookie', [...session.cookies])
-
   return submission.success({
     message: session.emailVerificationRequired
       ? 'Signed in. Verify your email address to continue.'

apps/blog-nuxt/server/api/logout.post.ts

@@ -1,8 +1,7 @@
 import { logout, user } from '@holo-js/auth'
 
-export default defineEventHandler(async (event) => {
-  const signedOut = await logout()
-  event.node.res.setHeader('set-cookie', [...signedOut.cookies])
+export default defineEventHandler(async () => {
+  await logout()
 
   return {
     ok: true,

apps/blog-nuxt/server/api/register.post.ts

@@ -27,7 +27,6 @@ export default defineEventHandler(async (event) => {
   }
 
   const session = await loginUsing(created)
-  event.node.res.setHeader('set-cookie', [...session.cookies])
   setResponseStatus(event, 201)
   return submission.success({
     message: session.emailVerificationRequired

apps/blog-nuxt/server/lib/request.ts

@@ -0,0 +1,15 @@
+import { getHeaders, getRequestURL, type H3Event } from 'h3'
+
+export function toWebRequest(event: H3Event): Request {
+  const headers = new Headers()
+  for (const [key, value] of Object.entries(getHeaders(event))) {
+    if (typeof value === 'string') {
+      headers.set(key, value)
+    }
+  }
+
+  return new Request(getRequestURL(event), {
+    method: event.method,
+    headers,
+  })
+}

apps/blog-nuxt/server/routes/auth/github.get.ts

@@ -0,0 +1,7 @@
+import { redirect } from '@holo-js/auth-social'
+
+import { toWebRequest } from '../../lib/request'
+
+export default defineEventHandler((event) => {
+  return redirect('github', toWebRequest(event))
+})

apps/blog-nuxt/server/routes/auth/github/callback.get.ts

@@ -0,0 +1,15 @@
+import auth from '@holo-js/auth'
+import { callback } from '@holo-js/auth-social'
+
+import { toWebRequest } from '../../../lib/request'
+
+export default defineEventHandler(async (event) => {
+  const result = await callback('github', toWebRequest(event))
+  if (!result.ok) {
+    setResponseStatus(event, result.status)
+    return { message: result.message }
+  }
+
+  await auth.guard(result.guard).loginUsing(result.user)
+  return sendRedirect(event, '/admin', 303)
+})

apps/blog-nuxt/server/routes/auth/google.get.ts

@@ -0,0 +1,7 @@
+import { redirect } from '@holo-js/auth-social'
+
+import { toWebRequest } from '../../lib/request'
+
+export default defineEventHandler((event) => {
+  return redirect('google', toWebRequest(event))
+})

apps/blog-nuxt/server/routes/auth/google/callback.get.ts

@@ -0,0 +1,15 @@
+import auth from '@holo-js/auth'
+import { callback } from '@holo-js/auth-social'
+
+import { toWebRequest } from '../../../lib/request'
+
+export default defineEventHandler(async (event) => {
+  const result = await callback('google', toWebRequest(event))
+  if (!result.ok) {
+    setResponseStatus(event, result.status)
+    return { message: result.message }
+  }
+
+  await auth.guard(result.guard).loginUsing(result.user)
+  return sendRedirect(event, '/admin', 303)
+})

apps/blog-sveltekit/src/routes/api/login/+server.ts

@@ -28,11 +28,6 @@ export async function POST({ request }: { request: Request }) {
     })
   }
 
-  const headers = new Headers()
-  for (const cookie of session.cookies) {
-    headers.append('set-cookie', cookie)
-  }
-
   return json(submission.success({
     message: session.emailVerificationRequired
       ? 'Signed in. Verify your email address to continue.'
@@ -41,7 +36,5 @@ export async function POST({ request }: { request: Request }) {
       ? session.emailVerificationRoute ?? '/verify-email'
       : '/admin',
     user: session.user,
-  }), {
-    headers,
-  })
+  }))
 }

apps/blog-sveltekit/src/routes/api/logout/+server.ts

@@ -2,18 +2,12 @@ import { json } from '@sveltejs/kit'
 import { logout, user } from '@holo-js/auth'
 
 export async function POST() {
-  const signedOut = await logout()
-  const headers = new Headers()
-  for (const cookie of signedOut.cookies) {
-    headers.append('set-cookie', cookie)
-  }
+  await logout()
 
   return json({
     ok: true,
     authenticated: false,
     message: 'Signed out successfully.',
     user: await user(),
-  }, {
-    headers,
   })
 }

apps/blog-sveltekit/src/routes/api/register/+server.ts

@@ -29,11 +29,6 @@ export async function POST({ request }: { request: Request }) {
   }
 
   const session = await loginUsing(created)
-  const headers = new Headers()
-  for (const cookie of session.cookies) {
-    headers.append('set-cookie', cookie)
-  }
-
   return json(submission.success({
     message: session.emailVerificationRequired
       ? 'Account created. Check your inbox to verify your email address.'
@@ -44,6 +39,5 @@ export async function POST({ request }: { request: Request }) {
     user: session.user,
   }, 201), {
     status: 201,
-    headers,
   })
 }

apps/blog-sveltekit/src/routes/auth/github/+server.ts

@@ -0,0 +1,5 @@
+import { redirect } from '@holo-js/auth-social'
+
+export function GET({ request }: { request: Request }): Promise<Response> {
+  return redirect('github', request)
+}

apps/blog-sveltekit/src/routes/auth/github/callback/+server.ts

@@ -0,0 +1,21 @@
+import { json, redirect } from '@sveltejs/kit'
+import auth from '@holo-js/auth'
+import { callback } from '@holo-js/auth-social'
+
+export function GET({ request }: { request: Request }): Promise<Response> {
+  return handleCallback(request)
+}
+
+async function handleCallback(request: Request): Promise<Response> {
+  const result = await callback('github', request)
+  if (!result.ok) {
+    return json({
+      message: result.message,
+    }, {
+      status: result.status,
+    })
+  }
+
+  await auth.guard(result.guard).loginUsing(result.user)
+  throw redirect(303, '/admin')
+}

apps/blog-sveltekit/src/routes/auth/google/+server.ts

@@ -0,0 +1,5 @@
+import { redirect } from '@holo-js/auth-social'
+
+export function GET({ request }: { request: Request }): Promise<Response> {
+  return redirect('google', request)
+}

apps/blog-sveltekit/src/routes/auth/google/callback/+server.ts

@@ -0,0 +1,21 @@
+import { json, redirect } from '@sveltejs/kit'
+import auth from '@holo-js/auth'
+import { callback } from '@holo-js/auth-social'
+
+export function GET({ request }: { request: Request }): Promise<Response> {
+  return handleCallback(request)
+}
+
+async function handleCallback(request: Request): Promise<Response> {
+  const result = await callback('google', request)
+  if (!result.ok) {
+    return json({
+      message: result.message,
+    }, {
+      status: result.status,
+    })
+  }
+
+  await auth.guard(result.guard).loginUsing(result.user)
+  throw redirect(303, '/admin')
+}

apps/blog-sveltekit/src/routes/login/+page.svelte

@@ -27,6 +27,11 @@
     <p>Use your email address and password to access the admin area.</p>
   </div>
 
+  <div class="social-links">
+    <a href="/auth/google">Continue with Google</a>
+    <a href="/auth/github">Continue with GitHub</a>
+  </div>
+
   <form class="stack" on:submit={(event) => { event.preventDefault(); form.submit() }}>
     <label class="field">
       <span>Email</span>
@@ -89,6 +94,8 @@
   .copy p { margin: 0; color: #94a3b8; }
   .stack, .field { display: grid; gap: 0.35rem; }
   .stack { gap: 0.9rem; }
+  .social-links { display: grid; gap: 0.65rem; }
+  .social-links a { color: #e5e7eb; text-decoration: none; }
   .remember, .links { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
   .error { color: #fca5a5; }
   .success { color: #86efac; }