How to use convex google and apple auth?

[soft arch]

[uncut hull]

Hi @soft arch. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

To use Convex Auth with Google and Apple authentication, you need to configure each provider in your Convex project. Here’s a step-by-step guide based on the official documentation and community experience:

---

1. Set Up Convex Auth

First, ensure you have Convex Auth set up in your project. If you’re starting from scratch, run:

npm create convex@latest

Choose React (Vite) and Convex Auth when prompted. For existing projects, follow the setup guide.

---

2. Configure Google OAuth

• Create a Google Cloud project and set up OAuth credentials.
• Set the Authorized redirect URI to your Convex deployment’s actions URL plus /api/auth/callback/google. For example:

  <https://your-deployment.convex.site/api/auth/callback/google>
  

• Set environment variables in your Convex project:

  npx convex env set AUTH_GOOGLE_ID <your-google-client-id>
  npx convex env set AUTH_GOOGLE_SECRET <your-google-client-secret>
  

• Add Google to your convex/auth.ts:

  import Google from "@auth/core/providers/google";
  import { convexAuth } from "@convex-dev/auth/server";
  
  export const { auth, signIn, signOut, store, isAuthenticated } = convexAuth({
    providers: [Google],
  });
  

Google OAuth Instructions

---

3. Configure Apple OAuth

• Create an App ID, Service ID, and Key in the Apple Developer portal, enabling "Sign in with Apple".

• Set the Return URL to your Convex deployment’s actions URL plus /api/auth/callback/apple. For example:

  <https://your-deployment.convex.site/api/auth/callback/apple>
  

• Set environment variables:

  npx convex env set AUTH_APPLE_ID <your-apple-service-id>
  npx convex env set AUTH_APPLE_SECRET <your-apple-client-secret>
  

  The Apple client secret is a JWT you generate using your Apple key, team ID, and service ID. The Convex docs provide a form to help generate this.

• Add Apple to your convex/auth.ts. The recommended config handles the user’s name on first login:

  import Apple from "@auth/core/providers/apple";
  import { convexAuth } from "@convex-dev/auth/server";
  
  export const { auth, signIn, signOut, store, isAuthenticated } = convexAuth({
    providers: [
      Apple({
        profile: (appleInfo) => {
          const name = appleInfo.user
            ? `${appleInfo.user.name.firstName} ${appleInfo.user.name.lastName}`
            : undefined;
          return {
            id: appleInfo.sub,
            name: name,
            email: appleInfo.email,
          };
        },
      }),
    ],
  });
  

Apple OAuth Instructions

---

4. Add Sign-In Buttons

You’ll need to build your own UI for sign-in buttons. When a user clicks a button, call the appropriate sign-in method from your Convex Auth integration.

---

Note:

• Apple does not support testing Sign in with Apple on localhost. You must deploy your app to a public URL with SSL for Apple login to work.
• Convex Auth is in beta; if you encounter issues, check the Convex Discord for support.

---

For more details and troubleshooting, see the Convex Auth documentation and the provider-specific guides linked above.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: