Issue with on device Expo

[raphaelmsr]

Hey there! Saw your amazing PR in NextAuth and I am actively following your work on integrating NextAuth in expo for this amazing stack, kudos!

But it seems like this has only been tested on a simulator with Expo; I am having env issues for the WEBHOST variable in the trpcClient, also the callback redirection after a the Expo & Github login show me an error for mismatch URL (I have set two GitHub Apps on purpose one for expo one for next)
Have you managed to run this on a actual device ?

Thanks in advance, I hope I can contribute in some way :)

[intagaming]

Currently I'm maintaining the intagaming/next-auth PR branch so I don't know if there's anything wrong in this demo app. I can show you how I use that PR repo which I have deployed and run on Expo Go on a real device, with a real NextAuth server.

On the Next.js or Expo project, install next-auth. Then install patch-package. Then clone the PR to your machine, pnpm install and then cd into package/next-auth. Here run pnpm build, then copy the expo and core folder to the node_modules folder of the Next.js/Expo project. Then run npx patch-package next-auth to create a patch file, check that file into Git, then setup postinstall with patch-package so that it patches next-auth after install.

With next-auth patched, on Expo use the next-auth/expo module to communicate with the Next.js app. The providers are set up as in the PR. There are one extra that should be configured in app.config.js in the Expo app: nextAuthUrl which will be read by next-auth/expo, which will default to http://localhost:3000/api/auth. I'm not quite sure what you meant by "running on a real device" but I think if you got Simulator working, Expo Go on your phone should also work similar, and localhost will still be fine.

If you have set up to use the PR branch and still didn't work out, then provide some info around how you intended to set up the app on the real device, that would make it easier to track what went wrong.

One thing to check is that you didn't configure the callback url on GitHub as https://auth.expo.io/@your-username/yourappscheme. Did you do that?

[intagaming]

@raphaelmsr The WEBHOST is supposed to point to your trpc url I believe. It's irrelevant to the current next-auth/expo setup, so if you don't use trpc just skip it. I'll post to the PR the way I use the PR on my app (which I briefed to you above). Maybe in the next 24 hours or so.

[intagaming]

Also notice the undefined in the request callback when setting up the provider. I commented on that line, saying it should be the auth.expo.io url. Try to do that in your app.

[intagaming]

Here you go: nextauthjs/next-auth#5240 (comment)

[raphaelmsr]

Wow sorry about that, just went AFK right after my message.
I am just now seeing that all you replies; such dedication! :)

Yes I was wondering this since it was redirecting to localhost and localhost doesn't work on device but only IP address
Also process.env in the Expo app are not showing, only NODE_ENV so these were my questions
I did put the callback in the GitHub app somehow; will have a deeper look at all the tips you provided in order for me to double check my code since you move on with create-t3-turbo and not kaol.
I found the latter to be more conventient as it has Solito already built in and comes a little bit more battery-powered

Thanks again for your time answering this !

[raphaelmsr]

I started expo by clearing cache and re-updated my GitHub account and now it does go to the redirect but I have a OAuthAccountNotLinked error
I have found it to be linked to nextauthjs/next-auth#519 (comment)

Since we are initialising two actual different providers 'github' and 'githubExpo'; it does not allow linking the same account on both devices.
I wonder if this happens to the PR branch as well; I will try to deploy as you carefully explained in the post in the BR and see if I have this error again

[intagaming]

I started expo by clearing cache and re-updated my GitHub account and now it does go to the redirect but I have a OAuthAccountNotLinked error I have found it to be linked to nextauthjs/next-auth#519 (comment)

Since we are initialising two actual different providers 'github' and 'githubExpo'; it does not allow linking the same account on both devices. I wonder if this happens to the PR branch as well; I will try to deploy as you carefully explained in the post in the BR and see if I have this error again

Yeah currently we can't just automatically link 2 different GitHub providers together. We must manually link them. Here's roughly how, but I wasn't renovate this code yet so it went stale. Basically we check if the two GitHub accounts is the same, then link them together.

[raphaelmsr]

This is how I managed to link both, work in both ways.

Would you recommend continuing with this project template or just wait on the implementation of NextAuth in Expo ?
I dont want to start to "hack my way" but since I am new to NextJS I liked the idea of your amazing template - makes the learning curve less steep....

[intagaming]

This is how I managed to link both, work in both ways.

Would you recommend continuing with this project template or just wait on the implementation of NextAuth in Expo ? I dont want to start to "hack my way" but since I am new to NextJS I liked the idea of your amazing template - makes the learning curve less steep....

next-auth/expo could be installed in any Expo/Next.js template, so that's not very related to the choice of a project template. As for the Next.js/Expo monorepo project template, I'd recommend using create-t3-turbo instead of create-kaol-app. Sharing logic between the two is fine, but sharing the same way of writing markups is not. It is unclear what <View> will be rendered into on the web. Rather than trying to share a code between native & web, just write 2 versions and tailer the experience to each one. It would make the code easier to reason about.

Solito is the way to share navigation between web & native. I think handling navigation on each platform differently is fine. It has one less dependency.