#Convex Auth Apple

1 messages · Page 1 of 1 (latest)

foggy oyster
charred patrol
#

This is what I got as well. Unfortunately to my understanding that's a generic error message that can happen for any number of reasons.

foggy oyster
#

is there a way to log exactly the call to Apple

#

does convex auth send any query params, or payload?

charred patrol
#

You can see all the arguments in the Network tab, since the communication is done via a server redirect.

#

Your convex backend replies with Location header, which your browser uses to redirect.

In case of RN I'm not sure how to see the Network logs actually for the in-app browser.

foggy oyster
#

you get the same error on the web.

#

Is it a problem related to
Website URLs
Provide your web domain and return URLs that will support Sign in with Apple. Your website must support TLS 1.2 or higher. All Return URLs must be registered with the https:// protocol included in the URI string. After registering new website URLs, confirm the list you’d like to add to this Services ID and click Done. To complete the process, click Continue, then click Save.

I notice that Clerk uses a callback url that uses my domain, while Convex uses its own url

charred patrol
#

Yeah, but presumably you can register the Convex backend URL as well?

#

Otherwise we might need to figure out a way to proxy the OAuth flow through your hosting server - or you could drive the OAuth flow from the in-app browser and at the end exchange the credentials.

foggy oyster
#

for github and google it doesn't seem to matter at all from RN

#

Has anyone got Apple log in working with convex auth?

#

I added these but, but still error

#

@charred patrol is scope being sent with the first call to Apple

#

@charred patrol Has anyone got Apple log in working with convex auth?

#

https://developer.apple.com/documentation/technotes/tn3107-resolving-sign-in-with-apple-response-errors?changes=_7
invalid_scope | The requested scope is invalid. | Make sure the request is correct, and that the provided scope is supported, etc.

Apple Developer Documentation
TN3107: Resolving Sign in with Apple response errors | Apple Develo...

Diagnose errors received by the Sign in with Apple client, or its server infrastructure, by identifying the underlying causes of common error codes and explore their potential solutions.

charred patrol
#

I think it might be set to openid profile email , I'll check

foggy oyster
#

is there a way to override that?

#

Or just to see a log statement to confirm

foggy oyster
#

@charred patrol does the apple oauth with convex auth work for anyone?

foggy oyster
foggy oyster
ornate totem
#

I haven't personally heard of anyone using Apple yet, or done it myself (yet). So please report back with your experience if you get it working

foggy oyster
#

No luck so far and I can’t figure out how to see exactly what the call to Apple is. I currently only have this in react native and I don’t see the call in the networking tab of the Java script console

foggy oyster
#

I’m pretty sure Apple is rejecting that first call

ornate totem
#

To debug whether it's a bug with Auth.js or Convex Auth, you could make a dummy project using our Auth.js adapter (or the Apple provider with any Auth.js project): https://stack.convex.dev/nextauth

Stack
Convex with Auth.js (NextAuth)

Learn how to use Auth.js with your Next.js server and Convex backend to build a full-featured authentication system.

primal pivot
#

thank fucking god i didnt try apple auth

#

i was so close to

#

lol

foggy oyster
charred patrol
#

@foggy oyster sorry, I'm working on something else, if you want to debug yourself you can:

  1. Edit node_modules/@convex-dev/auth/dist/server/implementation.js
  2. On line 360 add console.log("Sent to apple", redirect);
  3. Deploy (have npx convex dev running)
  4. Observe the logs on your Convex dashboard

This will show you the URL that's used to open the Apple OAuth page (the URL params are all the arguments provided to Apple).

foggy oyster
#

Awesome

foggy oyster
charred patrol
#

That's wrong. @foggy oyster can you try again with @convex-dev/[email protected]. I'm hoping it fixes the scope.

foggy oyster
#

@charred patrol what should the scope be

#

I can manually replace it just to test

charred patrol
#

The URL should have scope=name+email&response_mode=form_post

foggy oyster
#

should I remove response_type

charred patrol
#

Is the URL failing still? Does it work when you remove response_type?

foggy oyster
#

still failing

#

same without response type

#

actually thats a new error

charred patrol
#

Ok, response_type has to be response_type=code+id_token

#

Then I get a new error, invalid redirect URL

#

But that presumably is fixable in your apple config

foggy oyster
foggy oyster
#

the apple configs are way confusing

charred patrol
#

Way way

foggy oyster
#

progress

Screenshot_2024-07-24_at_10.54.38_AM.png
#

now it does the whole log in, but than I get this error

Screenshot_2024-07-24_at_11.00.49_AM.png
#

No matching routes found

#

also same thing in PROD

charred patrol
#

Awesome! What did you change to fix the redirect URL?

foggy oyster
#

I had done it before, but you have to hit continue a few times than save or it doesn't save it

charred patrol
#

Do you get any logs on your dashboard?

#

(I just tried it in my browser against your backend)

foggy oyster
#

Jul 24, 11:08:40

H
GET /api/auth/callback/apple
error
[Error: pkce cookie is missing.]

charred patrol
#

It's weird that it's returning 404 though

foggy oyster
#

if you try again I'll send all the logs

foggy oyster
charred patrol
#

I obviously don't have the cookie set since I'm starting from the Apple URL

foggy oyster
#

`import { convexAuth } from "@convex-dev/auth/server";
import Google from "@auth/core/providers/google";
import GitHub from "@auth/core/providers/github";
import Apple from "@auth/core/providers/apple";

export const { auth, signIn, signOut, store } = convexAuth({
providers: [Google, GitHub, Apple],
callbacks: {
async redirect({ redirectTo }) {
console.log('redirectTo:', redirectTo)
return redirectTo;
},
},
});
`

charred patrol
#

Can you try:

  1. Upgrade to @convex-dev/[email protected] (now the scope should be actually fixed)
  2. Change auth.ts to have:
Apple({
  authorization: {
    params: { scope: "name email", response_mode: "form_post", response_type: "code id_token" }
  }
})
foggy oyster
#

where do I put that

charred patrol
# 
export const { auth, signIn, signOut, store } = convexAuth({
  providers: [Google, GitHub,
    Apple({
      authorization: {
        params: { scope: "name email", response_mode: "form_post", response_type: "code id_token" }
      }
    })
  ],
  callbacks: {
    async redirect({ redirectTo }) {
      console.log('redirectTo:', redirectTo)
      return redirectTo;
    },
  },
});
foggy oyster
# charred patrol ``` export const { auth, signIn, signOut, store } = convexAuth({ providers: [G...

Argument of type '{ authorization: { params: { scope: string; response_mode: string; response_type: string; }; }; }' is not assignable to parameter of type 'Omit<OAuthUserConfig<any>, "clientSecret"> & { clientSecret: string; }'.
Property 'clientSecret' is missing in type '{ authorization: { params: { scope: string; response_mode: string; response_type: string; }; }; }' but required in type '{ clientSecret: string; }'.ts(2345)
apple.d.ts(140, 5): 'clientSecret' is declared here.

#

clientSecret is required

#

`import Google from "@auth/core/providers/google";
import GitHub from "@auth/core/providers/github";
import Apple from "@auth/core/providers/apple";

export const { auth, signIn, signOut, store } = convexAuth({

providers: [Google, GitHub,
Apple({
authorization: {
params: { scope: "name email", response_mode: "form_post", response_type: "code id_token" }
},
clientSecret: ""
})
],
callbacks: {
async redirect({ redirectTo }) {
console.log('redirectTo:', redirectTo)
return redirectTo;
},
},
});
`

#

that will compile at least

charred patrol
#

You can ignore that type error, or set clientSecret: process.env.AUTH_APPLE_SECRET

foggy oyster
#

same error

charred patrol
#

404? And where do you see the pkce cookie is missing error (can you screenshot)

#

(and are you starting the whole flow, not just from the Apple URL)

foggy oyster
#

I think I only got the pkce error when you tried

charred patrol
#

Ok. So which error are you getting now?

foggy oyster
#

did you just try something

charred patrol
#

The later ones are me hitting your backend haha

foggy oyster
#

can you try with apple

charred patrol
#

Do you have something else in your http.ts file besides the setup code?

foggy oyster
#

`import { httpRouter } from "convex/server";
import { auth } from "./auth";

const http = httpRouter();

auth.addHttpRoutes(http);

export default http;
`

charred patrol
#

Baffling

#

And I cannot repro on my backend

#

Oh, why are they POSTing

#

One sec

foggy oyster
#

@charred patrol any thoughts

charred patrol
foggy oyster
#

exciting, are these new versions just for me?

charred patrol
#

They're for everyone, but I'm making these fixes thanks to you! 😇

foggy oyster
charred patrol
#

(dm'd you on Discord as well)

foggy oyster
#

the response from
const result = await openAuthSessionAsync(redirect!.toString(), redirectTo);

is lacking the code from apple
apple returned {"error": null, "type": "success", "url": "exp://192.168.1.153:8081"}
google returned {"error": null, "type": "success", "url": "exp://192.168.1.153:8081/?code=21516484"}

charred patrol
#

Ok, got it to work.

Use @convex-dev/[email protected]

And configure Apple like this:

    Apple({
      clientSecret: process.env.AUTH_APPLE_SECRET!,
      client: {
        token_endpoint_auth_method: "client_secret_post",
      },
      profile: undefined,
    }),

I'll open a PR with Auth.js to fix the provider config so this config isn't needed in the future.

foggy oyster
#

thank you so much it works now @charred patrol

jolly perch
#

i followed the documentation and this is the error i encountered

image.png