feat: Add SWR middleware for clerk auth + universal login example

Author: codinsonn

apps/expo/app/(generated)/me/index.tsx

@@ -0,0 +1,2 @@
+// -i- Automatically generated by 'yarn link-routes', do not modify manually
+export { default } from 'user-management/routes/me/index'

apps/expo/app/_layout.tsx

@@ -1,27 +1,58 @@
 import { useEffect } from 'react'
 import { Stack, SplashScreen } from 'expo-router'
-// Layouts
 import RootLayout from 'app/routes/layout'
-// Config
 import tailwindConfig from 'app/tailwind.config'
-// Context
 import { AetherContextManager } from 'aetherspace/context'
-// Assets
+import { useAuth } from '@aetherspace/clerk-auth/hooks'
 import * as assets from 'registries/assets.generated'
-// Hooks
 import useLoadFonts from 'app/hooks/useLoadFonts'
+import { setGlobal } from 'aetherspace/utils'
 
 /* --- Config ---------------------------------------------------------------------------------- */
 
 SplashScreen.preventAutoHideAsync()
 
+/* --- <AetherContextWrapper/> ----------------------------------------------------------------- */
+
+const AetherContextWrapper = () => {
+  // Auth
+  const { getToken } = useAuth()
+
+  // -- Effects --
+
+  useEffect(() => {
+    setGlobal('getAuthToken', getToken)
+  }, [getToken])
+
+  // -- Render --
+
+  return (
+    <AetherContextManager
+      assets={assets}
+      icons={{}}
+      twConfig={tailwindConfig}
+      getAuthToken={getToken}
+      isAppDir
+      isExpo
+    >
+      <Stack
+        screenOptions={{
+          headerShown: false,
+          contentStyle: { backgroundColor: '#FFFFFF' },
+          animation: 'slide_from_right',
+        }}
+      />
+    </AetherContextManager>
+  )
+}
+
 /* --- <ExpoRootLayout/> ----------------------------------------------------------------------- */
 
 const ExpoRootLayout = () => {
   // Hide app when fonts not yet loaded
   const fontsLoaded = useLoadFonts()
 
-  // -- Splash --
+  // -- Effects --
 
   useEffect(() => {
     // Hide the splash screen after the fonts have loaded and the UI is ready
@@ -34,15 +65,7 @@ const ExpoRootLayout = () => {
 
   return (
     <RootLayout>
-      <AetherContextManager assets={assets} icons={{}} twConfig={tailwindConfig} isExpo isAppDir>
-        <Stack
-          screenOptions={{
-            headerShown: false,
-            contentStyle: { backgroundColor: '#FFFFFF' },
-            animation: 'slide_from_right',
-          }}
-        />
-      </AetherContextManager>
+      <AetherContextWrapper />
     </RootLayout>
   )
 }

apps/next/app/(generated)/me/page.tsx

@@ -0,0 +1,2 @@
+'use client'
+export { default, dynamic } from 'user-management/routes/me/index'

apps/next/app/ClientRootLayout.tsx

@@ -1,14 +1,11 @@
 'use client'
-// Analytics
+import { useEffect } from 'react'
 import { Analytics } from '@vercel/analytics/react'
-// Config
 import tailwindConfig from 'app/tailwind.config'
-// Context
 import { AetherContextManager } from 'aetherspace/context'
-// Hooks
+import { useAuth } from '@aetherspace/clerk-auth/hooks'
 import useLoadFonts from 'app/hooks/useLoadFonts'
-// Utils
-import { setPublicEnvVars } from 'aetherspace/utils'
+import { setPublicEnvVars, setGlobal } from 'aetherspace/utils'
 
 /* --- Public Env Vars ------------------------------------------------------------------------- */
 
@@ -29,16 +26,32 @@ const NextClientRootLayout = (props: { children: React.ReactNode }) => {
   // Props
   const { children } = props
 
+  // Auth
+  const { getToken } = useAuth()
+
   // -- Fonts --
 
   useLoadFonts()
 
+  // -- Effects --
+
+  useEffect(() => {
+    setGlobal('getAuthToken', getToken)
+  }, [getToken])
+
   // -- Render --
 
   return (
     <>
       <Analytics />
-      <AetherContextManager assets={{}} icons={{}} twConfig={tailwindConfig} isNextJS isAppDir>
+      <AetherContextManager
+        assets={{}}
+        icons={{}}
+        twConfig={tailwindConfig}
+        getAuthToken={getToken}
+        isAppDir
+        isNextJS
+      >
         {children}
       </AetherContextManager>
     </>

apps/next/middleware.ts

@@ -13,7 +13,7 @@ export default authMiddleware({
     // Create the request context header (to pass things like auth, user, etc. to the API)
     const headerContext = await createRequestContext(req, { auth, evt })
     const extraHeaders = {
-      'x-custom-header': 'custom-value',
+      // 'x-custom-header': 'custom-value',
     }
 
     // Execute the request handler (and pass the request context header)

apps/next/schema.graphql

@@ -11,8 +11,8 @@ The `JSONObject` scalar type represents JSON objects as specified by [ECMA-404](
 scalar JSONObject
 
 input GetRequestContextArgs {
-  """Echoes back the input"""
-  echo: String
+  """Returns extra debug info"""
+  debug: String
 }
 
 type ClerkActor {
@@ -329,7 +329,7 @@ type ClerkUserProperties {
   """
   A getter boolean to check if the user has uploaded an image or one was copied from OAuth. Returns false if Clerk is displaying an avatar for the user.
   """
-  hasImage: Boolean!
+  hasImage: Boolean
 
   """Information about the user's primary email address."""
   primaryEmailAddress: ClerkUserEmailAdress
@@ -342,10 +342,10 @@ type ClerkUserProperties {
   """
   An array of all the EmailAddress objects associated with the user. Includes the primary.
   """
-  emailAdresses: [ClerkUserEmailAdress]!
+  emailAddresses: [ClerkUserEmailAdress]!
 
   """A getter boolean to check if the user has verified an email address."""
-  hasVerifiedEmailAddress: Boolean!
+  hasVerifiedEmailAddress: Boolean
 
   """Information about the user's primary phone number."""
   primaryPhoneNumber: ClerkUserPhoneNumber
@@ -361,49 +361,49 @@ type ClerkUserProperties {
   phoneNumbers: [ClerkUserPhoneNumber]!
 
   """A getter boolean to check if the user has verified a phone number."""
-  hasVerifiedPhoneNumber: Boolean!
+  hasVerifiedPhoneNumber: Boolean
 
   """
   An array of all the ExternalAccount objects associated with the user via OAuth. Note: This includes both verified & unverified external accounts.
   """
   externalAccounts: [ClerkExternalAccount]!
 
   """A getter for the user's list of verified external accounts."""
-  verifiedExternalAccounts: [ClerkExternalAccount]!
+  verifiedExternalAccounts: [ClerkExternalAccount]
 
   """A getter for the user's list of unverified external accounts."""
-  unverifiedExternalAccounts: [ClerkExternalAccount]!
+  unverifiedExternalAccounts: [ClerkExternalAccount]
 
   """
   A list of OrganizationMemberships representing the list of organizations the user is member with.
   """
-  organizationMemberships: [ClerkOrganizationMembership]!
+  organizationMemberships: [ClerkOrganizationMembership]
 
   """A boolean indicating whether the user has a password on their account."""
-  passwordEnabled: Boolean!
+  passwordEnabled: Boolean
 
   """
   A boolean indicating whether the user has enabled TOTP by generating a TOTP secret and verifying it via an authenticator app.
   """
-  totpEnabled: Boolean!
+  totpEnabled: Boolean
 
   """
   A boolean indicating whether the user has enabled two-factor authentication.
   """
-  twoFactorEnabled: Boolean!
+  twoFactorEnabled: Boolean
 
   """A boolean indicating whether the user has enabled Backup codes."""
-  backupCodeEnabled: Boolean!
+  backupCodeEnabled: Boolean
 
   """
   A boolean indicating whether the organization creation is enabled for the user or not.
   """
-  createOrganizationEnabled: Boolean!
+  createOrganizationEnabled: Boolean
 
   """
   A boolean indicating whether the user is able to delete their own account or not.
   """
-  deleteSelfEnabled: Boolean!
+  deleteSelfEnabled: Boolean
 
   """
   Date when the user last signed in. May be empty if the user has never signed in.

features/user-management/resolvers/getRequestContext.ts

@@ -7,7 +7,7 @@ import { GetRequestContextResponse } from '../schemas/GetRequestContextResponse'
 export const getRequestContext = aetherResolver(
   async ({ args, parseArgs, withDefaults, handleError, context, user }) => {
     try {
-      const clerkUser = context?.user as GetRequestContextResponse['user']
+      const clerkUser = (user || context?.user) as GetRequestContextResponse['user']
 
       // -- Get user from DB --
 

features/user-management/routes/me/index.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { AetherPage } from 'aetherspace/navigation'
+import * as UserInfoScreen from '../../screens/UserInfoScreen'
+
+/* --- Config ---------------------------------------------------------------------------------- */
+
+const ScreenComponent = UserInfoScreen.UserInfoScreen
+const screenConfig = UserInfoScreen.screenConfig
+
+/* --- /me ------------------------------------------------------------------------------------- */
+
+const PageScreen = (props: UserInfoScreen.UserInfoScreenProps) => (
+  <AetherPage {...props} screen={ScreenComponent} screenConfig={screenConfig} />
+)
+
+/* --- Exports --------------------------------------------------------------------------------- */
+
+export const dynamic = screenConfig.dynamic
+
+export default PageScreen

features/user-management/schemas/GetRequestContextArgs.ts

@@ -3,13 +3,13 @@ import { z, aetherSchema } from 'aetherspace/schemas'
 /* --- Descriptions ---------------------------------------------------------------------------- */
 
 const d = {
-  echo: `Echoes back the input`,
+  debug: `Returns extra debug info`,
 }
 
 /* --- GetRequestContextArgs ------------------------------------------------------------------ */
 
 export const GetRequestContextArgs = aetherSchema('GetRequestContextArgs', {
-  echo: z.string().nullish().describe(d.echo),
+  debug: z.string().nullish().describe(d.debug),
 })
 
 export type GetRequestContextArgs = z.infer<typeof GetRequestContextArgs>

features/user-management/screens/SignInScreen.tsx

@@ -37,8 +37,6 @@ export const SignInScreen = (props: SignInScreenProps) => {
     // Ignore if not loaded
     if (!isLoaded) return
 
-    console.log('handleSignInPressed()', { formState, isSignedIn })
-
     try {
       // Remove the previous session if there is one
       if (isSignedIn) await session.end()
@@ -53,7 +51,7 @@ export const SignInScreen = (props: SignInScreenProps) => {
       await setActive({ session: completedSignIn.createdSessionId })
 
       // Navigate to home
-      openLink('/')
+      openLink('/me')
     } catch (error) {
       console.error(JSON.stringify(error, null, 4))
     }