WorkOS Authkit as Custom Auth Integration with Convex

export default {
  providers: [
    {
      type: "customJwt",
      applicationID: "convex-workos",
      issuer: `https://auth.workos.com/sso/${process.env.WORKOS_CLIENT_ID}`,
      jwks: `https://auth.workos.com/sso/jwks/${process.env.WORKOS_CLIENT_ID}`,
      algorithm: "RS256",
    },
  ],
} as const;

export default {
  providers: [
    {
      type: "customJwt",
      applicationID: "convex-workos",
      issuer: `https://auth.workos.com/sso/${process.env.WORKOS_CLIENT_ID}`,
      jwks: `https://auth.workos.com/sso/jwks/${process.env.WORKOS_CLIENT_ID}`,
      algorithm: "RS256",
    },
  ],
} as const;

{"type":"AuthError","error":"No auth provider found matching the given token","baseVersion":0,"authUpdateAttempted":true}

{"type":"AuthError","error":"No auth provider found matching the given token","baseVersion":0,"authUpdateAttempted":true}

{
  "aud": "convex-workos",
  "iss": "https://api.workos.com",
  "sub": "user_01JV2874P7YR4JJKGRZ2ZY4G4J",
  "sid": "session_01JVFTEDF79MANVY44Z9M27NMG",
  "jti": "01JVMNE7SHR7NBY48C79XKSRJG",
  "exp": 1747671643,
  "iat": 1747671523
}

{
  "aud": "convex-workos",
  "iss": "https://api.workos.com",
  "sub": "user_01JV2874P7YR4JJKGRZ2ZY4G4J",
  "sid": "session_01JVFTEDF79MANVY44Z9M27NMG",
  "jti": "01JVMNE7SHR7NBY48C79XKSRJG",
  "exp": 1747671643,
  "iat": 1747671523
}

https://api.workos.com/sss/jwks/{CLIENT_ID}

https://api.workos.com/sss/jwks/{CLIENT_ID}

{"type":"AuthError","error":"Invalid Content-Type when fetching JWKS","baseVersion":0,"authUpdateAttempted":true}    

{"type":"AuthError","error":"Invalid Content-Type when fetching JWKS","baseVersion":0,"authUpdateAttempted":true}    

export async function GET(request: NextRequest) {
  const jwks =
    process.env.NODE_ENV === 'development'
      ? await fetch(
          "https://api.workos.com/sso/jwks/{clientId}",
        )

      : await fetch(
          "https://api.workos.com/sso/jwks/{clientId}",
        );

  const data = await jwks.json();

  console.log('Fetched JWKS: ', jwks);

  return NextResponse.json(data, { status: 200 });
}

export async function GET(request: NextRequest) {
  const jwks =
    process.env.NODE_ENV === 'development'
      ? await fetch(
          "https://api.workos.com/sso/jwks/{clientId}",
        )

      : await fetch(
          "https://api.workos.com/sso/jwks/{clientId}",
        );

  const data = await jwks.json();

  console.log('Fetched JWKS: ', jwks);

  return NextResponse.json(data, { status: 200 });
}

export default {
  providers: [
    {
      type: "customJwt",
      applicationID: "via-auth",
      issuer: "https://api.workos.com",
      jwks: `https://api.workos.com/sso/jwks/${process.env.WORKOS_CLIENT_ID}`,
      algorithm: "RS256",

    },
  ],
}; 

export default {
  providers: [
    {
      type: "customJwt",
      applicationID: "via-auth",
      issuer: "https://api.workos.com",
      jwks: `https://api.workos.com/sso/jwks/${process.env.WORKOS_CLIENT_ID}`,
      algorithm: "RS256",

    },
  ],
}; 

export default {
  providers: [
    {
      type: 'customJwt',
      applicationID: 'my-app',
      issuer: 'https://api.workos.com',
      jwks: `http://localhost:3000/api/auth/jwks`,
      algorithm: 'RS256',
    },
  ],
};

export default {
  providers: [
    {
      type: 'customJwt',
      applicationID: 'my-app',
      issuer: 'https://api.workos.com',
      jwks: `http://localhost:3000/api/auth/jwks`,
      algorithm: 'RS256',
    },
  ],
};

{
  "aud": "my-app"
}

{
  "aud": "my-app"
}

import { NextResponse } from 'next/server';

export async function GET() {
  const clientId = process.env.WORKOS_CLIENT_ID;
  if (!clientId) {
    return NextResponse.json({ error: 'Missing WorkOS client ID' }, { status: 500 });
  }

  const jwks =
    process.env.NODE_ENV === 'development'
      ? await fetch(`https://api.workos.com/sso/jwks/${clientId}`)
      : await fetch(`https://api.workos.com/sso/jwks/${clientId}`);

  const data = await jwks.json();

  console.log('Fetched JWKS: ', jwks);

  return NextResponse.json(data, { status: 200 });
}

import { NextResponse } from 'next/server';

export async function GET() {
  const clientId = process.env.WORKOS_CLIENT_ID;
  if (!clientId) {
    return NextResponse.json({ error: 'Missing WorkOS client ID' }, { status: 500 });
  }

  const jwks =
    process.env.NODE_ENV === 'development'
      ? await fetch(`https://api.workos.com/sso/jwks/${clientId}`)
      : await fetch(`https://api.workos.com/sso/jwks/${clientId}`);

  const data = await jwks.json();

  console.log('Fetched JWKS: ', jwks);

  return NextResponse.json(data, { status: 200 });
}

const identity = await ctx.auth.getUserIdentity();
console.log('identity', identity);

const identity = await ctx.auth.getUserIdentity();
console.log('identity', identity);

"use client";

import * as React from "react";

import { ConvexProviderWithAuth, ConvexReactClient } from "convex/react";
import {
  AuthKitProvider,
  useAccessToken,
  useAuth,
} from "@workos-inc/authkit-nextjs/components";

const convex = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL!);

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <AuthKitProvider>
      <ConvexProviderWithAuth client={convex} useAuth={useWorkosConvexAuth}>
        {children}
      </ConvexProviderWithAuth>
    </AuthKitProvider>
  );
}

function useWorkosConvexAuth() {
  const {
    accessToken,
    loading: accessTokenLoading,
    refresh,
  } = useAccessToken();
  const { user, loading } = useAuth();

  const fetchAccessToken = React.useCallback(
    async ({ forceRefreshToken }: { forceRefreshToken: boolean }) => {
      if (accessTokenLoading || loading) return null;
      if (!accessToken && forceRefreshToken) {
        return (await refresh()) ?? null;
      }
      return accessToken ?? null;
    },
    [accessToken, accessTokenLoading, loading]
  );

  return React.useMemo(
    () => ({
      isLoading: loading || accessTokenLoading,
      isAuthenticated: Boolean(user),
      fetchAccessToken,
    }),
    [loading, accessTokenLoading, user, fetchAccessToken]
  );
}

"use client";

import * as React from "react";

import { ConvexProviderWithAuth, ConvexReactClient } from "convex/react";
import {
  AuthKitProvider,
  useAccessToken,
  useAuth,
} from "@workos-inc/authkit-nextjs/components";

const convex = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL!);

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <AuthKitProvider>
      <ConvexProviderWithAuth client={convex} useAuth={useWorkosConvexAuth}>
        {children}
      </ConvexProviderWithAuth>
    </AuthKitProvider>
  );
}

function useWorkosConvexAuth() {
  const {
    accessToken,
    loading: accessTokenLoading,
    refresh,
  } = useAccessToken();
  const { user, loading } = useAuth();

  const fetchAccessToken = React.useCallback(
    async ({ forceRefreshToken }: { forceRefreshToken: boolean }) => {
      if (accessTokenLoading || loading) return null;
      if (!accessToken && forceRefreshToken) {
        return (await refresh()) ?? null;
      }
      return accessToken ?? null;
    },
    [accessToken, accessTokenLoading, loading]
  );

  return React.useMemo(
    () => ({
      isLoading: loading || accessTokenLoading,
      isAuthenticated: Boolean(user),
      fetchAccessToken,
    }),
    [loading, accessTokenLoading, user, fetchAccessToken]
  );
}

import { WorkOS } from "@workos-inc/node";

import { NextRequest, NextResponse } from "next/server";

export async function POST(req: NextRequest) {
  const workos = new WorkOS(process.env.WORKOS_API_KEY);
  const { email } = await req.json();

  await workos.userManagement.createMagicAuth({
    email,
  });

  return NextResponse.json({ ok: true });
}

import { WorkOS } from "@workos-inc/node";

import { NextRequest, NextResponse } from "next/server";

export async function POST(req: NextRequest) {
  const workos = new WorkOS(process.env.WORKOS_API_KEY);
  const { email } = await req.json();

  await workos.userManagement.createMagicAuth({
    email,
  });

  return NextResponse.json({ ok: true });
}

import { saveSession } from "@workos-inc/authkit-nextjs";
import { WorkOS } from "@workos-inc/node";

import { NextRequest, NextResponse } from "next/server";

export async function POST(req: NextRequest) {
  const workos = new WorkOS(process.env.WORKOS_API_KEY);
  const { email, code } = await req.json();

  const session = await workos.userManagement.authenticateWithMagicAuth({
    clientId: process.env.WORKOS_CLIENT_ID!,
    code,
    email,
  });

  await saveSession(session, req);

  return NextResponse.json({ ok: true });
}

import { saveSession } from "@workos-inc/authkit-nextjs";
import { WorkOS } from "@workos-inc/node";

import { NextRequest, NextResponse } from "next/server";

export async function POST(req: NextRequest) {
  const workos = new WorkOS(process.env.WORKOS_API_KEY);
  const { email, code } = await req.json();

  const session = await workos.userManagement.authenticateWithMagicAuth({
    clientId: process.env.WORKOS_CLIENT_ID!,
    code,
    email,
  });

  await saveSession(session, req);

  return NextResponse.json({ ok: true });
}

import { NextRequest, NextResponse } from "next/server";

export async function GET(request: NextRequest) {
  const jwks = await fetch(
    `https://api.workos.com/sso/jwks/${process.env.WORKOS_CLIENT_ID}`
  );

  const data = await jwks.json();

  console.log("Fetched JWKS: ", data);

  return NextResponse.json(data, { status: 200 });
}

import { NextRequest, NextResponse } from "next/server";

export async function GET(request: NextRequest) {
  const jwks = await fetch(
    `https://api.workos.com/sso/jwks/${process.env.WORKOS_CLIENT_ID}`
  );

  const data = await jwks.json();

  console.log("Fetched JWKS: ", data);

  return NextResponse.json(data, { status: 200 });
}

import { env } from "./env";

export default {
  providers: [
    {
      type: "customJwt",
      applicationID: "convex",
      issuer: "https://api.workos.com",
      jwks: `https://api.workos.com/sso/jwks/${env.WORKOS_CLIENT_ID}`,
      algorithm: "RS256",
    },
  ],
};

import { env } from "./env";

export default {
  providers: [
    {
      type: "customJwt",
      applicationID: "convex",
      issuer: "https://api.workos.com",
      jwks: `https://api.workos.com/sso/jwks/${env.WORKOS_CLIENT_ID}`,
      algorithm: "RS256",
    },
  ],
};

{
  "aud": "convex",
  "name": "{{ user.first_name }} {{ user.last_name }}",
  "email": {{user.email}},
  "picture": {{user.profile_picture_url}},
  "given_name": {{user.first_name}},
  "updated_at": {{user.updated_at}},
  "family_name": {{user.last_name}},
  "email_verified": {{user.email_verified}}
}

{
  "aud": "convex",
  "name": "{{ user.first_name }} {{ user.last_name }}",
  "email": {{user.email}},
  "picture": {{user.profile_picture_url}},
  "given_name": {{user.first_name}},
  "updated_at": {{user.updated_at}},
  "family_name": {{user.last_name}},
  "email_verified": {{user.email_verified}}
}

// Request for the POST method using workos.userManagement.createMagicAuth
export async function requestSignIn(email: string) {
  return await fetch(`/api/auth/request-sign-in`, {
    method: "POST",
    body: JSON.stringify({ email }),
  });
}
// Request for the POST method using workos.userManagement.authenticateWithMagicAuth and saving the session from workos
export async function signIn(email: string, code: string) {
  return await fetch(`/api/auth/sign-in`, {
    method: "POST",
    body: JSON.stringify({ email, code }),
  });
}

// Request for the POST method using workos.userManagement.createMagicAuth
export async function requestSignIn(email: string) {
  return await fetch(`/api/auth/request-sign-in`, {
    method: "POST",
    body: JSON.stringify({ email }),
  });
}
// Request for the POST method using workos.userManagement.authenticateWithMagicAuth and saving the session from workos
export async function signIn(email: string, code: string) {
  return await fetch(`/api/auth/sign-in`, {
    method: "POST",
    body: JSON.stringify({ email, code }),
  });
}

import { env } from "./env";

export default {
  providers: [
    {
      type: "customJwt",
      applicationID: "convex",
      issuer: "https://api.workos.com",
      jwks: `https://api.workos.com/sso/jwks/${env.WORKOS_CLIENT_ID}`,
      algorithm: "RS256",
    },
  ],
};

import { env } from "./env";

export default {
  providers: [
    {
      type: "customJwt",
      applicationID: "convex",
      issuer: "https://api.workos.com",
      jwks: `https://api.workos.com/sso/jwks/${env.WORKOS_CLIENT_ID}`,
      algorithm: "RS256",
    },
  ],
};

"use client";

import { requestSignIn, signIn } from "@/lib/workos";
import { useAuth } from "@workos-inc/authkit-nextjs/components";
import { useRouter } from "next/navigation";

export function AuthForm() {
  const { refreshAuth } = useAuth();
  const router = useRouter();

// Request sign in magic code here
// ...

  async function handleSubmit(email: string, code: string) {
    await signIn(email, code);
    await refreshAuth();
    router.push("/");
  }

// form implementation here
// ...
}

"use client";

import { requestSignIn, signIn } from "@/lib/workos";
import { useAuth } from "@workos-inc/authkit-nextjs/components";
import { useRouter } from "next/navigation";

export function AuthForm() {
  const { refreshAuth } = useAuth();
  const router = useRouter();

// Request sign in magic code here
// ...

  async function handleSubmit(email: string, code: string) {
    await signIn(email, code);
    await refreshAuth();
    router.push("/");
  }

// form implementation here
// ...
}

export function useTaskList() {
  const { isAuthenticated, isLoading } = useConvexAuth();
  const query = useQuery({
    ...convexQuery(
      api.tasks.query.list,
      isLoading || !isAuthenticated ? "skip" : {}
    ),
    placeholderData: (prev) => prev,
  });
  return query;
}

export function useTaskList() {
  const { isAuthenticated, isLoading } = useConvexAuth();
  const query = useQuery({
    ...convexQuery(
      api.tasks.query.list,
      isLoading || !isAuthenticated ? "skip" : {}
    ),
    placeholderData: (prev) => prev,
  });
  return query;
}

tomb@Thomass-MacBook-Pro-2 tutorial % npx convex dev --once; npx convex env set FOO=1; npx convex dev --once --run-sh 'echo do other stuff after a successful push'
✔ Provisioned a dev deployment and saved its name as CONVEX_DEPLOYMENT to .env.local

Write your Convex functions in convex/
Give us feedback at https://convex.dev/community or support@convex.dev
View the Convex dashboard at https://dashboard.convex.dev/d/first-bandicoot-876

✖ Error: Unable to push deployment config to https://first-bandicoot-876.convex.cloud
✖ Error fetching POST  https://first-bandicoot-876.convex.cloud/api/push_config 400 Bad Request: InvalidModules: Hit an error while pushing:
Loading the pushed modules encountered the following
    error:
Failed to analyze messages.js: Uncaught Error: please set FOO!
    at <anonymous> (../convex/messages.ts:8:20)
✔ Successfully set FOO to 1 (on dev deployment first-bandicoot-876)
✔ Provisioned a dev deployment and saved its name as CONVEX_DEPLOYMENT to .env.local

Write your Convex functions in convex/
Give us feedback at https://convex.dev/community or support@convex.dev
View the Convex dashboard at https://dashboard.convex.dev/d/first-bandicoot-876

✔ 19:21:20 Convex functions ready! (1.57s)
do other stuff after a successful push

tomb@Thomass-MacBook-Pro-2 tutorial % npx convex dev --once; npx convex env set FOO=1; npx convex dev --once --run-sh 'echo do other stuff after a successful push'
✔ Provisioned a dev deployment and saved its name as CONVEX_DEPLOYMENT to .env.local

Write your Convex functions in convex/
Give us feedback at https://convex.dev/community or support@convex.dev
View the Convex dashboard at https://dashboard.convex.dev/d/first-bandicoot-876

✖ Error: Unable to push deployment config to https://first-bandicoot-876.convex.cloud
✖ Error fetching POST  https://first-bandicoot-876.convex.cloud/api/push_config 400 Bad Request: InvalidModules: Hit an error while pushing:
Loading the pushed modules encountered the following
    error:
Failed to analyze messages.js: Uncaught Error: please set FOO!
    at <anonymous> (../convex/messages.ts:8:20)
✔ Successfully set FOO to 1 (on dev deployment first-bandicoot-876)
✔ Provisioned a dev deployment and saved its name as CONVEX_DEPLOYMENT to .env.local

Write your Convex functions in convex/
Give us feedback at https://convex.dev/community or support@convex.dev
View the Convex dashboard at https://dashboard.convex.dev/d/first-bandicoot-876

✔ 19:21:20 Convex functions ready! (1.57s)
do other stuff after a successful push

import * as SecureStore from "expo-secure-store";

export const secureStore = {
  getItem: (key: string) => SecureStore.getItem(key),
  removeItem: (key: string) => SecureStore.deleteItemAsync(key),
  setItem: (key: string, value: string) => SecureStore.setItem(key, value),
};

import * as SecureStore from "expo-secure-store";

export const secureStore = {
  getItem: (key: string) => SecureStore.getItem(key),
  removeItem: (key: string) => SecureStore.deleteItemAsync(key),
  setItem: (key: string, value: string) => SecureStore.setItem(key, value),
};

import * as React from "react";
import { RootSiblingParent } from "react-native-root-siblings";
import { env } from "@/lib/env";
import { secureStore } from "@/lib/secure-store";
import { ConvexAuthProvider } from "@convex-dev/auth/react";
import { ConvexQueryClient } from "@convex-dev/react-query";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ConvexReactClient } from "convex/react";

const convex = new ConvexReactClient(env.EXPO_PUBLIC_CONVEX_URL!, {
  unsavedChangesWarning: false,
});
const convexQueryClient = new ConvexQueryClient(convex);
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      queryKeyHashFn: convexQueryClient.hashFn(),
      queryFn: convexQueryClient.queryFn(),
    },
  },
});
convexQueryClient.connect(queryClient);

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <ConvexAuthProvider
      client={convex}
      storage={secureStore}
      storageNamespace="session_token"
    >
      <QueryClientProvider client={queryClient}>
        <RootSiblingParent>
          {children}
        </RootSiblingParent>
      </QueryClientProvider>
    </ConvexAuthProvider>
  );
}

import * as React from "react";
import { RootSiblingParent } from "react-native-root-siblings";
import { env } from "@/lib/env";
import { secureStore } from "@/lib/secure-store";
import { ConvexAuthProvider } from "@convex-dev/auth/react";
import { ConvexQueryClient } from "@convex-dev/react-query";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ConvexReactClient } from "convex/react";

const convex = new ConvexReactClient(env.EXPO_PUBLIC_CONVEX_URL!, {
  unsavedChangesWarning: false,
});
const convexQueryClient = new ConvexQueryClient(convex);
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      queryKeyHashFn: convexQueryClient.hashFn(),
      queryFn: convexQueryClient.queryFn(),
    },
  },
});
convexQueryClient.connect(queryClient);

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <ConvexAuthProvider
      client={convex}
      storage={secureStore}
      storageNamespace="session_token"
    >
      <QueryClientProvider client={queryClient}>
        <RootSiblingParent>
          {children}
        </RootSiblingParent>
      </QueryClientProvider>
    </ConvexAuthProvider>
  );
}

import * as SecureStore from "expo-secure-store";

export const storage = {
  getItem: (key: string) => SecureStore.getItemAsync(key),
  removeItem: (key: string) => SecureStore.deleteItemAsync(key),
  setItem: (key: string, value: string) => SecureStore.setItemAsync(key, value),
};

import * as SecureStore from "expo-secure-store";

export const storage = {
  getItem: (key: string) => SecureStore.getItemAsync(key),
  removeItem: (key: string) => SecureStore.deleteItemAsync(key),
  setItem: (key: string, value: string) => SecureStore.setItemAsync(key, value),
};

import * as React from "react";

import { storage } from "@/lib/storage";
import { ConvexQueryClient } from "@convex-dev/react-query";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ConvexProviderWithAuth, ConvexReactClient } from "convex/react";

interface ProvidersProps {
  children: React.ReactNode;
}

const convex = new ConvexReactClient(process.env.EXPO_PUBLIC_CONVEX_URL!, {
  unsavedChangesWarning: false,
});
const convexQueryClient = new ConvexQueryClient(convex);
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      queryKeyHashFn: convexQueryClient.hashFn(),
      queryFn: convexQueryClient.queryFn(),
    },
  },
});
convexQueryClient.connect(queryClient);

export function Providers({ children }: ProvidersProps) {
  return (
    <ConvexProviderWithAuth client={convex} useAuth={useWorkosConvexAuth}>
      <QueryClientProvider client={queryClient}>
        {children}
      </QueryClientProvider>
    </ConvexProviderWithAuth>
  );
}

function useWorkosConvexAuth() {
  const [isLoading, setIsLoading] = React.useState(true);
  const [isAuthenticated, setIsAuthenticated] = React.useState(false);

  React.useEffect(() => {
    async function init() {
      const accessToken = await storage.getItem("accessToken");
      if (accessToken) {
        setIsAuthenticated(true);
      }
      setIsLoading(false);
    }
    init();
  }, []);

  const fetchAccessToken = React.useCallback(
    async ({
      forceRefreshToken: _forceRefreshToken,
    }: {
      forceRefreshToken: boolean;
    }) => {
      // TODO: handle refresh token
      return storage.getItem("accessToken");
    },
    []
  );

  return React.useMemo(
    () => ({
      isLoading,
      isAuthenticated,
      fetchAccessToken,
    }),
    [isLoading, isAuthenticated, fetchAccessToken]
  );
}

import * as React from "react";

import { storage } from "@/lib/storage";
import { ConvexQueryClient } from "@convex-dev/react-query";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ConvexProviderWithAuth, ConvexReactClient } from "convex/react";

interface ProvidersProps {
  children: React.ReactNode;
}

const convex = new ConvexReactClient(process.env.EXPO_PUBLIC_CONVEX_URL!, {
  unsavedChangesWarning: false,
});
const convexQueryClient = new ConvexQueryClient(convex);
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      queryKeyHashFn: convexQueryClient.hashFn(),
      queryFn: convexQueryClient.queryFn(),
    },
  },
});
convexQueryClient.connect(queryClient);

export function Providers({ children }: ProvidersProps) {
  return (
    <ConvexProviderWithAuth client={convex} useAuth={useWorkosConvexAuth}>
      <QueryClientProvider client={queryClient}>
        {children}
      </QueryClientProvider>
    </ConvexProviderWithAuth>
  );
}

function useWorkosConvexAuth() {
  const [isLoading, setIsLoading] = React.useState(true);
  const [isAuthenticated, setIsAuthenticated] = React.useState(false);

  React.useEffect(() => {
    async function init() {
      const accessToken = await storage.getItem("accessToken");
      if (accessToken) {
        setIsAuthenticated(true);
      }
      setIsLoading(false);
    }
    init();
  }, []);

  const fetchAccessToken = React.useCallback(
    async ({
      forceRefreshToken: _forceRefreshToken,
    }: {
      forceRefreshToken: boolean;
    }) => {
      // TODO: handle refresh token
      return storage.getItem("accessToken");
    },
    []
  );

  return React.useMemo(
    () => ({
      isLoading,
      isAuthenticated,
      fetchAccessToken,
    }),
    [isLoading, isAuthenticated, fetchAccessToken]
  );
}

import { Button } from "@/components/ui/button";
import { api } from "@/convex/_generated/api";
import { storage } from "@/lib/storage";
import { useAction } from "convex/react";
import * as AuthSession from "expo-auth-session";
import * as WebBrowser from "expo-web-browser";
import { View } from "react-native";

export function AuthForm() {
  const getAuthorisationUrl = useAction(api.workos.action.getAuthorisationUrl);
  const authenticateWithCode = useAction(
    api.workos.action.authenticateWithCode
  );

  async function handleGoogleLogin() {
    // The redirectUri must be added to the sign-in callback in the workos dashboard
    const redirectUri = AuthSession.makeRedirectUri().toString();

    const authorisationUrl = await getAuthorisationUrl({
      provider: "GoogleOAuth",
      redirectUri,
    });

    const result = await WebBrowser.openAuthSessionAsync(
      authorisationUrl,
      redirectUri
    );

    if (result.type !== "success" || !result.url)
      throw new Error("Authentication cancelled or failed");

    const params = new URL(result.url).searchParams;

    const code = params.get("code");

    if (!code) throw new Error("No code returned");

    const { accessToken, refreshToken, user } = await authenticateWithCode({
      code,
    });

    await storage.setItem("refreshToken", refreshToken);
    await storage.setItem("accessToken", accessToken);
    await storage.setItem("user", JSON.stringify(user));
  }

  return (
    <View className="flex-1 items-center justify-center">
      <Button icon="logo-google" onPress={handleGoogleLogin}>
        Sign In with Google
      </Button>
    </View>
  );
}

import { Button } from "@/components/ui/button";
import { api } from "@/convex/_generated/api";
import { storage } from "@/lib/storage";
import { useAction } from "convex/react";
import * as AuthSession from "expo-auth-session";
import * as WebBrowser from "expo-web-browser";
import { View } from "react-native";

export function AuthForm() {
  const getAuthorisationUrl = useAction(api.workos.action.getAuthorisationUrl);
  const authenticateWithCode = useAction(
    api.workos.action.authenticateWithCode
  );

  async function handleGoogleLogin() {
    // The redirectUri must be added to the sign-in callback in the workos dashboard
    const redirectUri = AuthSession.makeRedirectUri().toString();

    const authorisationUrl = await getAuthorisationUrl({
      provider: "GoogleOAuth",
      redirectUri,
    });

    const result = await WebBrowser.openAuthSessionAsync(
      authorisationUrl,
      redirectUri
    );

    if (result.type !== "success" || !result.url)
      throw new Error("Authentication cancelled or failed");

    const params = new URL(result.url).searchParams;

    const code = params.get("code");

    if (!code) throw new Error("No code returned");

    const { accessToken, refreshToken, user } = await authenticateWithCode({
      code,
    });

    await storage.setItem("refreshToken", refreshToken);
    await storage.setItem("accessToken", accessToken);
    await storage.setItem("user", JSON.stringify(user));
  }

  return (
    <View className="flex-1 items-center justify-center">
      <Button icon="logo-google" onPress={handleGoogleLogin}>
        Sign In with Google
      </Button>
    </View>
  );
}

export const getAuthorisationUrl = publicAction({
  args: {
    provider: v.string(),
    redirectUri: v.string(),
  },
  async handler(_ctx, args) {
    const workos = new WorkOS(env.WORKOS_API_KEY);
    const url = workos.userManagement.getAuthorizationUrl({
      clientId: env.WORKOS_CLIENT_ID,
      provider: args.provider,
      redirectUri: args.redirectUri,
    });

    return url;
  },
});

export const authenticateWithCode = publicAction({
  args: {
    code: v.string(),
  },
  async handler(_ctx, { code }) {
    const workos = new WorkOS(env.WORKOS_API_KEY);
    const response = await workos.userManagement.authenticateWithCode({
      clientId: env.WORKOS_CLIENT_ID,
      code,
    });

    return response;
  },
});

export const getAuthorisationUrl = publicAction({
  args: {
    provider: v.string(),
    redirectUri: v.string(),
  },
  async handler(_ctx, args) {
    const workos = new WorkOS(env.WORKOS_API_KEY);
    const url = workos.userManagement.getAuthorizationUrl({
      clientId: env.WORKOS_CLIENT_ID,
      provider: args.provider,
      redirectUri: args.redirectUri,
    });

    return url;
  },
});

export const authenticateWithCode = publicAction({
  args: {
    code: v.string(),
  },
  async handler(_ctx, { code }) {
    const workos = new WorkOS(env.WORKOS_API_KEY);
    const response = await workos.userManagement.authenticateWithCode({
      clientId: env.WORKOS_CLIENT_ID,
      code,
    });

    return response;
  },
});

  const preloaded = await preloadQuery(api.myFunctions.listNumbers, {
    count: 3,
  });

  const preloaded = await preloadQuery(api.myFunctions.listNumbers, {
    count: 3,
  });

  const { accessToken } = await withAuth({ ensureSignedIn: true });

  const preloaded = await preloadQuery(
    api.myFunctions.listNumbers,
    {
      count: 3,
    },
    { token: accessToken }
  );

  const { accessToken } = await withAuth({ ensureSignedIn: true });

  const preloaded = await preloadQuery(
    api.myFunctions.listNumbers,
    {
      count: 3,
    },
    { token: accessToken }
  );

    //// Read the database as many times as you need here.
    //// See https://docs.convex.dev/database/reading-data.
    const numbers = await ctx.db
      .query('numbers')
      // Ordered by _creationTime, return most recent
      .order('desc')
      .take(args.count);
    return {
      viewer: (await ctx.auth.getUserIdentity())?.name ?? null,
      numbers: numbers.reverse().map((number) => number.value),
    };

    //// Read the database as many times as you need here.
    //// See https://docs.convex.dev/database/reading-data.
    const numbers = await ctx.db
      .query('numbers')
      // Ordered by _creationTime, return most recent
      .order('desc')
      .take(args.count);
    return {
      viewer: (await ctx.auth.getUserIdentity())?.name ?? null,
      numbers: numbers.reverse().map((number) => number.value),
    };