Migrate the with-authjs example

[birkskyum]

The https://mediakit-taupe.vercel.app/auth/install appear to need a bit of attention in order to fix this, but I've fixed most of the in this branch

[changeset-bot]

⚠️ No Changeset found

Latest commit: 3995be5

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[birkskyum]

it's a quite popular solution, so it would be great to have working.

the error i get is from the api route:

UnknownAction: Cannot parse action at /api/auth/session .Read more at https://errors.authjs.dev#unknownaction

[ryansolid]

How's it going? Any blockers I should know about?

[birkskyum]

I am awaiting an update to the mediakit auth package as it was on an old version of the auth.js library - will try this again soon when this recent commit hits a release solidjs-community/mediakit@446e30f

[birkskyum]

@OrJDev , i keep hitting this error with server response with Discord, even when setting the appropriate env vars: "{"client_id": ["Value "undefined" is not snowflake."]}"

have you hit that before?

[OrJDev]

@OrJDev , i keep hitting this error with server response with Discord, even when setting the appropriate env vars: "{"client_id": ["Value "undefined" is not snowflake."]}"

have you hit that before?

Never. Im not the one who made this example, please use create jd app to create a fully working example with Solid Start & AuthJs.

pnpm create jd-app@latest

http://github.com/orjdev/create-jd-app

[birkskyum]

I tried that just now - it gives me a repo with very old deps (auth/core, @solidjs/start, vite etc.) and after setting the discord id/secret i see this:

My current redirect url is:
http://localhost:3000/api/auth/discord/callback

[OrJDev]

I tried that just now - it gives me a repo with very old deps (auth/core, @solidjs/start, vite etc.) and after setting the discord id/secret i see this:

My current redirect url is:

http://localhost:3000/api/auth/discord/callback

Wdym old deps? Also check out the redirect uri on the url on discord and send it here

[birkskyum]

I ran npm create jd-app@latest, ticked only the Auth, and got this which is quite old vinxi, solid-start, vite, auth/code etc.:

// package.json

  "devDependencies": {
    "@types/node": "^18.14.0",
    "@typescript-eslint/eslint-plugin": "^5.52.0",
    "@typescript-eslint/parser": "^5.52.0",
    "eslint": "^8.34.0",
    "eslint-plugin-solid": "^0.9.4",
    "typescript": "^4.9.5",
    "vite": "^4.4.9"
  },
  "dependencies": {
    "@solidjs/router": "^0.11.2",
    "@solidjs/start": "^0.5.2",
    "solid-js": "^1.8.14",
    "vinxi": "^0.2.1",
    "@solidjs/meta": "^0.29.3",
    "zod": "^3.22.4",
    "@auth/core": "0.15.0",
    "@solid-mediakit/auth": "^2.0.2"
  },

The url when i try to login is this:

https://discord.com/oauth2/authorize?scope=identify+email&response_type=code&client_id=1207977196929683456&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fapi%2Fauth%2Fcallback%2Fdiscord&code_challenge=ynY9Rq1HmWluX9R1HO-qi3zdrSjcDzLxxlOKkOrlwjs&code_challenge_method=S256

and inside my discord dev panel the redirect url is set to:
http://localhost:3000/api/auth/discord/callback

And None in the Default Authorization Link

[OrJDev]

redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fapi%2Fauth%2Fcallback%2Fdiscord

redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fapi%2Fauth%2Fcallback%2Fdiscord

It's trying to redirect to

http://localhost:3000/api/auth/callback/discord

So try and set it to this. Also deps could always be updated with one single command.

[birkskyum]

Thanks, that did the trick! It was the callback/discord that i had swapped in the url

[birkskyum]

@ryansolid , this is now finally ready as a direct port of the old example.

[ryansolid]

Awesome thank you

[ryansolid]

Yeah this looks way cleaner

[ryansolid]

Yeah I will merge this. Only thing I'm unclear is how this solution works with route load functions. To be fair the context provider will be available in them it is just less clear to me the patterns here.

In any case, thank you @birkskyum and @OrJDev for getting this together. This is a common question and this solution looks really clean.