Missing state on session when callback route is hit?

[tconroy]

Hello! This is likely a dumb question. I set up my routes and strategies per the readme using the GitHub strategy.

I am able to "login" with GitHub, but when the callback route is invoked, I see:

{
  "message": "Missing state on session."
}

GitHub seems to be hitting my route and providing code and state values:

http://localhost:3000/auth/github/callback?code=5099a3ec3e6983deac0b&state=665c96fe-aaf0-427c-ac8b-8951558d1234

Am I supposed to be doing anything with those values manually? Any idea what might be causing this?

expand to view code

// app/services/auth.server.ts
import { Authenticator } from 'remix-auth';
import { SocialsProvider, GitHubStrategy } from 'remix-auth-socials';
import type { User } from '~/models/user.server';
import { sessionStorage } from '~/services/sessionStorage.server';

export const authenticator = new Authenticator<User>(sessionStorage, {
  sessionKey: 'userId',
});

authenticator.use(
  new GitHubStrategy({
    clientID: '<REDACTED>',
    clientSecret: '<REDACTED>',
    callbackURL: `http://localhost:3000/auth/${SocialsProvider.GITHUB}/callback`,
  }, async (params) => {
    const user = getOrCreateUserByEmail(params.profile.emails);

    return user;
  })
);

// app/services/sessionStorage.server.ts
import { createCookieSessionStorage } from "@remix-run/node";
import invariant from "tiny-invariant";

invariant(process.env.SESSION_SECRET, "SESSION_SECRET must be set");

export const sessionStorage = createCookieSessionStorage({
  cookie: {
    name: '__session',
    httpOnly: true,
    maxAge: 0,
    path: "/",
    sameSite: "lax",
    secrets: [process.env.SESSION_SECRET],
    secure: process.env.NODE_ENV === "production",
  },
});

// app/routes/auth/$provider.ts
import type { ActionFunction, LoaderFunction } from "@remix-run/node";
import { redirect } from "@remix-run/node";
import invariant from "tiny-invariant";
import { authenticator } from "~/services/auth.server";

export const loader: LoaderFunction = () => redirect("/login");

export const action: ActionFunction = ({ request, params }) => {
  invariant(params.provider, "Must specify a provider.");

  return authenticator.authenticate(params.provider, request);
};

// app/routes/auth/$provider.callback.tsx
import type { LoaderFunction } from "@remix-run/node";
import invariant from "tiny-invariant";
import { authenticator } from "~/services/auth.server";

export const loader: LoaderFunction = async ({ request, params }) => {
  invariant(params.provider, "Must specify a provider.");

  return authenticator.authenticate(params.provider, request, {
    successRedirect: "/dashboard",
    failureRedirect: "/login",
  });
};

// app/routes/login.tsx
export default functon LoginPage() {
  return (
    <div>
        <Form action={`/auth/github`} method="post">
          <button>Log in with GitHub</button>
        </Form>
    </div>
  )
}

[TheRealFlyingCoder]

Hey I assume you figured this out, let me know if it still occures on the latest version as everything looks right in your code