fix github login on vercel preview deployments

[Balastrong]

It's probably something I should do but I haven't found a solution so far, so I'm open to get some help :)

When logging in via GitHub App, on the settings I must add a callback URL that will be used to redirect the user after sign in
(see docs: https://docs.github.com/en/apps/creating-github-apps/registering-a-github-app/about-the-user-authorization-callback-url)

This works fine for production and localhost as I specified the two URLs:

But it doesn't work for Vercel's deployment previews as they have different URLs.
I haven't found a way to put wildcards on GitHub or specify a redirect URL that works so... if someone has ideas, let me know! :D

[Steravy]

Hi?
Can i have more details about this one? I would like to fix this one.

[Balastrong]

Hey @Steravy, thanks for the help!

There's already some information in the description of the issue, the GitHub App wants an exact match on the callback but when deploying preview builds on Vercel it has a different URL every time.

It's not a "code" issue but rather something that has to be set somewhere, the questions are... what and where :D
Like, a wildcard on the app settings? I haven't found if this is actually possible, or passing nextauth a URL that matches one set in the app settings?

I'm open to suggestions :)

[ochowei]

hi @Balastrong,
I found this doc

<project-name>-<scope-slug>.vercel.app;

<project-name>-<author-name>-<scope-slug>.vercel.app;

my-project-git-this-is-really-an-extremely-long-bra-abc123xyz-scope-slug.vercel.app;

I am not sure is this what you want, please feel free to discuss.

[Balastrong]

Thank you @ochowei!

Yes, that one is how the url is formed but on the GitHub App settings I can only put the exact link where the auth request comes from.
This means that if there is a different link for each branch/author, this can't work unfortunately :(

[Steravy]

I saw that many developers have faced this problem, but despite of tons of github issues none of them presented the solution...
@Balastrong you didn`t found any solutions for it yet?

[Steravy]

@Balastrong If any other solutions wasn't yet implemented i believe i do have an idea to overcome this issue.

[Balastrong]

@Steravy no, I haven't found a solution yet. Suggestions are more than welcome! :)

[Steravy]

I have found a lot of related issues, the same problem i would say. But none of them referring to permanent solutions. If you don`t want to be replacing the url every time the app is deployed i would suggest you to take a look at Clerk
If you found it interesting and applicable to this project, i would like to contribute with the implementation.

[Balastrong]

Thank you @Steravy! The plan for now was to use a github app but I'll keep in mind that Cleck might be a valid option :)

[Kvnbbg]

I'm not a fan of theory parody, but I've been brainstorming a solution to the problem of callback URLs for Vercel deployment previews. I think that DNS wildcards could be a good solution.

A DNS wildcard record matches any subdomain of a given domain. For example, a DNS wildcard record for *.eeee.com would match preview.eeee.com, api.eeee.com, and any other subdomain of example.eeee.com.

To use a DNS wildcard record to solve the callback URL problem, you would create a record for *.eeee.com that points to your Vercel deployment preview. You could then update your callback URL in GitHub to point to *.eeee.com. This would ensure that users are redirected to your Vercel deployment preview after they sign in to your GitHub App, regardless of which subdomain they are using.