How does the callback endpoint work?

[leo-petrucci]

I'm writing up a guide on using Next Auth with Capacitor, and while my method works its:

• Not super clean
• Probably wouldn't work with React Native or other native apps

The big problem is that Android's in-app browser is just an instance of Chrome, so its cookies are entirely separate from the App's cookies. So I can essentially open the browser and login, but then the callback will just set cookies for the browser.

So I'm wondering how the callback endpoint works exactly? From the docs I can see I can GET it, what query params does it take to actually issue the right tokens? I checked what I think is the script responsible for it, but I'm unclear on how the req options are passed to it.

I'm thinking that if I can just hit the callback endpoint then I might be able to:

• Set the callback URL as an in-app link
• Auth through the in-app browser
• Fetch the callback endpoint from within the app
• Issue the tokens for the app rather than the browser

[balazsorban44]

I will assume you will be using an OAuth provider. In that case, contacting the /api/auth/callback/:provider endpoint is the OAuth Provider's concern. Here is the spec: https://datatracker.ietf.org/doc/html/rfc6749#section-4.1.2

If you are going to use the Credentials or Email provider, that might be different. Will you use one of these?

[leo-petrucci]

Yeah it's for a provider, I haven't looked into email and credentials yet.

I'm starting to think there's probably no way to override the callback url after oAuth, so this will probably not work. 😅

[balazsorban44]

question is, why would you need to override it?

[leo-petrucci]

The callback needs to be requested from the App or the cookies won't be set in the right client. I guess I could copy over all my Next Auth setup from my web-app to the app project but it seems a bit messy.

[balazsorban44]

do you have a repo to look at? I've never used Capacitor, but I could check out what you are doing.

[leo-petrucci]

Not quite...? As the actual login method doesn't work without some workarounds.

This is how I've got it working at the moment, this opens a webview that goes through the login process and sets auth cookies for the app.

A webview is different from an in app browser:

Ideally we'd like this login process to go through a Chrome Custom Tab as it's what the user would expect with oAuth logins, but as mentioned in the OP, Chrome Custom Tabs share their cookies with Chrome and not the app they were opened from.

Here's an example of how I thought this would work.

• Press the button to begin the login process
• Fetch the csrf token
• Get the url to login

Up to here everything is fine, the problems start once you try to use the login link.

• On this line I would try to open the link in the in-app browser
• I would then be asked to log-in with my account
• It would then redirect me to https://domain.com/api/auth/callback, which would set cookies for Chrome but not for the app.
• Once back to the app I would not be logged in.

Essentially the problem comes from Next Auth always sending me back to my domain's callback, while the callback would need to happen while still in the app itself for the auth cookie to be correctly set and usable within the native app.

I'm honestly not even sure if there's a proper solution to this 😂

I've seen apps get their oAuth logins to work by setting their callback URLs to deep link but I think that in this case that would probably require changes to how Next Auth works.

Sorry for brain dumping, hopefully this makes sense.

(If worse comes to worst the webview works fine, I'm just trying to see if there's a cleaner way to do it)