clerk auth

apps/blog-next/.env.example

@@ -48,9 +48,9 @@ WORKOS_REDIRECT_URI=
 WORKOS_SESSION_COOKIE=
 CLERK_PUBLISHABLE_KEY=
 CLERK_SECRET_KEY=
-CLERK_JWT_KEY=
 CLERK_API_URL=
 CLERK_FRONTEND_API=
+CLERK_REDIRECT_URI=
 CLERK_SESSION_COOKIE=
 
 BROADCAST_CONNECTION=holo

apps/blog-next/app/api/auth/clerk/callback/route.ts

@@ -0,0 +1,10 @@
+import { completeClerkAuth } from '@holo-js/auth-clerk'
+
+export async function GET(request: Request) {
+  const result = await completeClerkAuth(request)
+  if (!result.ok) {
+    return Response.redirect(new URL(`/login?error=${encodeURIComponent(result.code)}`, request.url))
+  }
+
+  return Response.redirect(new URL('/admin', request.url))
+}

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

@@ -0,0 +1,5 @@
+import { loginWithClerk } from '@holo-js/auth-clerk'
+
+export async function GET(request: Request) {
+  return await loginWithClerk(request)
+}

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

@@ -0,0 +1,10 @@
+import { logoutWithClerk } from '@holo-js/auth-clerk'
+
+export async function POST(request: Request) {
+  const result = await logoutWithClerk(request)
+  if (!result.ok) {
+    return Response.json(result, { status: 422 })
+  }
+
+  return Response.redirect(result.url, 303)
+}

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

@@ -0,0 +1,5 @@
+import { registerWithClerk } from '@holo-js/auth-clerk'
+
+export async function GET(request: Request) {
+  return await registerWithClerk(request)
+}

apps/blog-next/app/auth-nav.tsx

@@ -64,6 +64,9 @@ export function AuthNav() {
       <form action="/api/auth/workos/logout" method="post" style={logoutFormStyle}>
         <button type="submit" style={logoutButtonStyle}>Logout from WorkOS</button>
       </form>
+      <form action="/api/auth/clerk/logout" method="post" style={logoutFormStyle}>
+        <button type="submit" style={logoutButtonStyle}>Logout from Clerk</button>
+      </form>
     </>
   )
 }

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

@@ -48,6 +48,7 @@ export default function LoginPage() {
         <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>
         <a href="/api/auth/workos/login" style={{ color: '#e5e7eb', textDecoration: 'none' }}>Continue with WorkOS</a>
+        <a href="/api/auth/clerk/login" style={{ color: '#e5e7eb', textDecoration: 'none' }}>Continue with Clerk</a>
       </div>
 
       <form onSubmit={(event) => { event.preventDefault(); form.submit() }} style={{ display: 'grid', gap: '0.9rem' }}>

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

@@ -101,6 +101,7 @@ export default function RegisterPage() {
 
       <Link href="/login" style={{ color: '#7dd3fc' }}>Already have an account?</Link>
       <a href="/api/auth/workos/register" style={{ color: '#7dd3fc' }}>Register with WorkOS</a>
+      <a href="/api/auth/clerk/register" style={{ color: '#7dd3fc' }}>Register with Clerk</a>
     </section>
   )
 }

apps/blog-next/config/auth.ts

@@ -65,13 +65,14 @@ export default defineAuthConfig({
   },
   // Add a dedicated guard and provider if WorkOS users should resolve through a different model.
   clerk: {
+    provider: env('AUTH_CLERK_PROVIDER', 'app'),
     app: {
       publishableKey: env('CLERK_PUBLISHABLE_KEY'),
       secretKey: env('CLERK_SECRET_KEY'),
-      jwtKey: env('CLERK_JWT_KEY'),
       apiUrl: env('CLERK_API_URL'),
       frontendApi: env('CLERK_FRONTEND_API'),
-      sessionCookie: env('CLERK_SESSION_COOKIE', "__session"),
+      redirectUri: env('CLERK_REDIRECT_URI'),
+      sessionCookie: env('CLERK_SESSION_COOKIE', '__session'),
     },
   },
   // Add a dedicated guard and provider if Clerk users should resolve through a different model.

apps/blog-nuxt/.env.example

@@ -48,9 +48,9 @@ WORKOS_REDIRECT_URI=
 WORKOS_SESSION_COOKIE=
 CLERK_PUBLISHABLE_KEY=
 CLERK_SECRET_KEY=
-CLERK_JWT_KEY=
 CLERK_API_URL=
 CLERK_FRONTEND_API=
+CLERK_REDIRECT_URI=
 CLERK_SESSION_COOKIE=
 
 BROADCAST_CONNECTION=holo

apps/blog-nuxt/app/app.vue

@@ -24,6 +24,9 @@ async function logout() {
           <form action="/api/auth/workos/logout" method="post" class="logout-form">
             <button type="submit" class="logout-button">Logout from WorkOS</button>
           </form>
+          <form action="/api/auth/clerk/logout" method="post" class="logout-form">
+            <button type="submit" class="logout-button">Logout from Clerk</button>
+          </form>
         </template>
         <template v-else>
           <NuxtLink to="/login">Login</NuxtLink>

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

@@ -36,6 +36,7 @@ const form = useForm(loginForm, {
       <a href="/auth/google">Continue with Google</a>
       <a href="/auth/github">Continue with GitHub</a>
       <a href="/api/auth/workos/login">Continue with WorkOS</a>
+      <a href="/api/auth/clerk/login">Continue with Clerk</a>
     </div>
 
     <form class="stack" @submit.prevent="form.submit()">

apps/blog-nuxt/app/pages/register/index.vue

@@ -70,6 +70,7 @@ const form = useForm(registerForm, {
 
     <NuxtLink to="/login">Already have an account?</NuxtLink>
     <a href="/api/auth/workos/register">Register with WorkOS</a>
+    <a href="/api/auth/clerk/register">Register with Clerk</a>
   </section>
 </template>
 

apps/blog-nuxt/config/auth.ts

@@ -65,13 +65,14 @@ export default defineAuthConfig({
   },
   // Add a dedicated guard and provider if WorkOS users should resolve through a different model.
   clerk: {
+    provider: env('AUTH_CLERK_PROVIDER', 'app'),
     app: {
       publishableKey: env('CLERK_PUBLISHABLE_KEY'),
       secretKey: env('CLERK_SECRET_KEY'),
-      jwtKey: env('CLERK_JWT_KEY'),
       apiUrl: env('CLERK_API_URL'),
       frontendApi: env('CLERK_FRONTEND_API'),
-      sessionCookie: env('CLERK_SESSION_COOKIE', "__session"),
+      redirectUri: env('CLERK_REDIRECT_URI'),
+      sessionCookie: env('CLERK_SESSION_COOKIE', '__session'),
     },
   },
   // Add a dedicated guard and provider if Clerk users should resolve through a different model.

apps/blog-nuxt/server/api/auth/clerk/callback.get.ts

@@ -0,0 +1,12 @@
+import { completeClerkAuth } from '@holo-js/auth-clerk'
+import { sendRedirect } from 'h3'
+
+export default defineEventHandler(async (event) => {
+  const result = await completeClerkAuth(event)
+  if (!result.ok) {
+    const errCode = result.code ?? 'unknown_error'
+    return await sendRedirect(event, `/login?error=${encodeURIComponent(errCode)}`, 303)
+  }
+
+  return await sendRedirect(event, '/admin', 303)
+})

apps/blog-nuxt/server/api/auth/clerk/login.get.ts

@@ -0,0 +1,5 @@
+import { loginWithClerk } from '@holo-js/auth-clerk'
+
+export default defineEventHandler(async (event) => {
+  return await loginWithClerk(event)
+})

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

@@ -0,0 +1,14 @@
+import { logoutWithClerk } from '@holo-js/auth-clerk'
+import { createError, sendRedirect } from 'h3'
+
+export default defineEventHandler(async (event) => {
+  const result = await logoutWithClerk(event)
+  if (!result.ok) {
+    throw createError({
+      statusCode: 422,
+      statusMessage: result.message,
+    })
+  }
+
+  return await sendRedirect(event, result.url, 303)
+})

apps/blog-nuxt/server/api/auth/clerk/register.get.ts

@@ -0,0 +1,5 @@
+import { registerWithClerk } from '@holo-js/auth-clerk'
+
+export default defineEventHandler(async (event) => {
+  return await registerWithClerk(event)
+})

apps/blog-sveltekit/.env.example

@@ -48,9 +48,9 @@ WORKOS_REDIRECT_URI=
 WORKOS_SESSION_COOKIE=
 CLERK_PUBLISHABLE_KEY=
 CLERK_SECRET_KEY=
-CLERK_JWT_KEY=
 CLERK_API_URL=
 CLERK_FRONTEND_API=
+CLERK_REDIRECT_URI=
 CLERK_SESSION_COOKIE=
 
 BROADCAST_CONNECTION=holo

apps/blog-sveltekit/config/auth.ts

@@ -65,13 +65,14 @@ export default defineAuthConfig({
   },
   // Add a dedicated guard and provider if WorkOS users should resolve through a different model.
   clerk: {
+    provider: env('AUTH_CLERK_PROVIDER', 'app'),
     app: {
       publishableKey: env('CLERK_PUBLISHABLE_KEY'),
       secretKey: env('CLERK_SECRET_KEY'),
-      jwtKey: env('CLERK_JWT_KEY'),
       apiUrl: env('CLERK_API_URL'),
       frontendApi: env('CLERK_FRONTEND_API'),
-      sessionCookie: env('CLERK_SESSION_COOKIE', "__session"),
+      redirectUri: env('CLERK_REDIRECT_URI'),
+      sessionCookie: env('CLERK_SESSION_COOKIE', '__session'),
     },
   },
   // Add a dedicated guard and provider if Clerk users should resolve through a different model.

apps/blog-sveltekit/src/routes/+layout.svelte

@@ -45,6 +45,9 @@
         <form action="/api/auth/workos/logout" method="post" class="logout-form">
           <button type="submit" class="logout-button">Logout from WorkOS</button>
         </form>
+        <form action="/api/auth/clerk/logout" method="post" class="logout-form">
+          <button type="submit" class="logout-button">Logout from Clerk</button>
+        </form>
       {:else}
         <a href="/login">Login</a>
         <a href="/register">Register</a>

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

@@ -0,0 +1,11 @@
+import { redirect, type RequestHandler } from '@sveltejs/kit'
+import { completeClerkAuth } from '@holo-js/auth-clerk'
+
+export const GET = (async (event) => {
+  const result = await completeClerkAuth(event)
+  if (!result.ok) {
+    throw redirect(303, `/login?error=${encodeURIComponent(result.code)}`)
+  }
+
+  throw redirect(303, '/admin')
+}) satisfies RequestHandler

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

@@ -0,0 +1,6 @@
+import { loginWithClerk } from '@holo-js/auth-clerk'
+import type { RequestHandler } from './$types'
+
+export const GET = (async (event) => {
+  return await loginWithClerk(event)
+}) satisfies RequestHandler

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

@@ -0,0 +1,11 @@
+import { redirect, type RequestHandler } from '@sveltejs/kit'
+import { logoutWithClerk } from '@holo-js/auth-clerk'
+
+export const POST = (async (event) => {
+  const result = await logoutWithClerk(event)
+  if (!result.ok) {
+    return Response.json(result, { status: 422 })
+  }
+
+  throw redirect(303, result.url)
+}) satisfies RequestHandler

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

@@ -0,0 +1,6 @@
+import { registerWithClerk } from '@holo-js/auth-clerk'
+import type { RequestHandler } from './$types'
+
+export const GET = (async (event) => {
+  return await registerWithClerk(event)
+}) satisfies RequestHandler

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

@@ -31,6 +31,7 @@
     <a href="/auth/google">Continue with Google</a>
     <a href="/auth/github">Continue with GitHub</a>
     <a href="/api/auth/workos/login">Continue with WorkOS</a>
+    <a href="/api/auth/clerk/login">Continue with Clerk</a>
   </div>
 
   <form class="stack" on:submit={(event) => { event.preventDefault(); form.submit() }}>

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

@@ -97,6 +97,7 @@
 
   <a href="/login" class="link">Already have an account?</a>
   <a href="/api/auth/workos/register" class="link">Register with WorkOS</a>
+  <a href="/api/auth/clerk/register" class="link">Register with Clerk</a>
 </section>
 
 <style>