Universal Auth with Clerk 

npx @fullproduct/universal-app install with/auth-clerk

Installs the with/auth-clerk plugin branch and Pull-Request.

This enables universal authentication by adding the @auth/clerk workspace package to your monorepo:

• packages
  • @auth-clerk
    • context
      • ClerkAuthManager.(next|expo).tsx
      • <ClerkProvider /> (wrapper)
      • ClerkAuthContext.tsx
    • compat.ts
    • components
      • <SignUp />
      • <SignIn />
      • <UserButton />
      • <OrganizationSwitcher />
    • hooks
      • useSignIn()
      • useSignUp()
      • useClerk()
      • useAuth()
      • useUser()
      • useSession()
      • useOrganization()
      • useSocialAuthFlow()
      • useSignUpFlow()
      • useSignInFlow()
    • utils
      • getMobileAuthHeaders()

Requirements - Clerk Setup

Wrap each app root with ClerkAuthManager:

import { ClerkAuthManager } from '@auth/clerk/expo'

import { ClerkAuthManager } from '@auth/clerk/next'

Clerk Env Vars

Connect your apps by adding env vars to each app’s .env file:

EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_XXXXXXX...

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_XXXXXXX...
CLERK_SECRET_KEY=sk_test_XXXXXXX... # Only for server-side usage

Universal Auth - with Clerk

If you merged the plugin from our CLI, then everything should already be set up for you.

But, just to be sure, here’s a quick intro to what that plugin branch does.

Usage of Clerk packages

The gap between @clerk/nextjs and mobile is closed by portable UI that @clerk/clerk-expo does not ship:

• <SignIn />
• <SignUp />
• <UserButton />
• <OrganizationSwitcher />

Differences on Web vs Mobile

We reduced the API surface on mobile; core flows match web, with more configuration on web for now.

Next.js - /sign-in, /sign-up

In Next.js, merging this plugin branch adds two new pages to @app/next:

• apps / next
  • app
    • (auth) / sign-in / [[...rest]] / page.tsx
    • (auth) / sign-up / [[...rest]] / page.tsx

Both import from @auth/clerk; on web, SignIn and SignUp are the same components as in @clerk/nextjs—no extra restrictions.

• Custom Next.js SignIn / SignUp 

Expo - /sign-in, /sign-up

@clerk/clerk-expo does not ship pre-built auth screens, so this plugin adds portable screens with a smaller API surface.

• apps / expo
  • app
    • (generated) / sign-in / index.tsx
    • (generated) / sign-up / index.tsx
• packages / @auth-clerk
  • screens
    • SignInScreen.tsx
    • SignUpScreen.tsx
  • routes
    • sign-in / index.native.tsx
    • sign-up / index.native.tsx

Implementation references:

• Email / password — Expo 
• Social OAuth — Expo 

SignInScreen.tsx / SignUpScreen.tsx implement the screens using <SignIn /> and <SignUp /> from @auth/clerk, which delegate to @clerk/clerk-expo hooks.

Securing universal API calls

Next.js Middleware

On the web, Clerk’s auth token lives in cookies; clerkMiddleware reads them on each matched request.

This starter uses Next.js 16’s proxy.ts entry (same clerkMiddleware API as the older middleware.ts file). On an older Next major, you may still use middleware.ts and export const middleware—see Clerk’s middleware quickstart .

import { NextResponse } from 'next/server'
import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server'
import { createMiddlewareContext } from '@green-stack/utils/apiUtils'
 
const isProtectedRoute = createRouteMatcher([
    '/dashboard(.*)',
    '/api/plans(.*)',
    // ...
])
 
// -i- https://nextjs.org/docs/app/api-reference/functions/next-request
 
export const proxy = clerkMiddleware(async (auth, req) => {
    if (isProtectedRoute(req)) await auth.protect()
 
    const authCtx = await auth()
    const authToken = await authCtx.getToken()
 
    const headerContext: Partial<RequestContext> = {
        userId: authCtx.userId || undefined,
        orgId: authCtx.orgId || undefined,
        sessionId: authCtx.sessionId || undefined,
        authToken: authToken || undefined,
    }
 
    return NextResponse.next({
        request: {
            headers: await createMiddlewareContext(req, headerContext),
        },
    })
})
 
export const config = {
    matcher: [
        '/((?!.+\\.[\\w]+$|_next).*)',
        '/',
        '/(api|graphql|trpc)(.*)',
    ],
}

Mobile Auth Headers

On mobile there are no cookies—attach the session token to API requests.

For one-off REST calls from native:

import { getMobileAuthHeaders } from '@auth/clerk'
 
const authHeaders = await getMobileAuthHeaders()
// -> { Authorization: 'Bearer …' } on native when signed in
// -> { } when signed out, or on Next.js (cookies handle auth)
 
fetch('https://your-api-endpoint.com/protected', {
    method: 'GET',
    headers: {
        ...authHeaders,
        'Content-Type': 'application/json',
    },
})

Serverside auth checks & utils

Use @clerk/backend server-side to validate tokens. For data resolvers, helpers live under @auth/clerk/utils/server/clerk:

Example resolver excerpt:

import { getResolverClerkClient } from '@auth/clerk/utils/server/clerk'
 
/** --- getAuthState() ------------------------------------- */
/** -i- Retrieve the current authentication state */
export const getAuthState = createResolver(async ({ args, context, ... }) => {
 
    // Extract the request context (populated & verified from Next proxy / middleware)
    const { userId, orgId, sessionId, authToken } = context
 
    // If anything is missing, the edge layer kept the context empty (= not authenticated)
    if (!userId || !sessionId || !authToken) return { isSignedIn: false }
 
    // Get the Clerk client
    const clerkClient = await getResolverClerkClient(context)
 
    // Retrieve the session?
    const session = await clerkClient.sessions.verifySession(sessionId)
 
    // Retrieve the user object from clerk?
    const user = await clerkClient.users.getUser(userId)
 
    // ...
 
}, getAuthStateBridge)