Can't get user session

[kwiat1990]

Hi, recently after updating Remix and refactoring auth process I can't get user session. I followed this approach (first method): https://sergiodxa.com/articles/add-returnto-behavior-to-remix-auth and right know user's session contains something like this:

{
  "oauth2:state": "ddc28629-6e6c-45c0-ad69-3d65dc0fc349",
  "__flash_auth:error__": {
    "message": "body used already for: http://localhost:1337/api/auth/facebook/callback?access_token=EAAG3TM...DZD"
  }
}

Oddly enough both, my CMS and used auth provider (Google and Facebook) returned correct data, so I'm a little bit confused why the session isn't populated.

I've also tried to commit the session manually like hier: https://github.com/sergiodxa/remix-auth#custom-redirect-url-based-on-the-user, but it didn't really solved the issue.

[sergiodxa]

Based on this message "body used already for", looks like you didn't clone the request body before reading it and passing it to Remix Auth.

If you can, provide a reproduction repository with the code you used.

[sergiodxa]

You can only read the body once, when you do request.formData() you read the request body (also request.text(), request.json(), etc.) so any new attempt to read it will fail with body used already for which is what you're getting.

So, something somewhere may be reading the body before Remix Auth tried to read it, and that cause Remix Auth to fail, that's why your session has the key __flash_auth:error__ which is a session.flash set for auth:error the default sessionErrorKey used by Remix Auth.

But without seeing the code it's hard to tell what's happening, it could be some issue on v1.6.5 (I haven't upgraded yet) or it could be an issue in another part of your code.

Does the error happen only when you add the redirectTo behavior? If you use the basic examples from the docs of Remix Auth and your strategies does it happen it or does it work?

[kwiat1990]

Below is the whole code I use for handling authentication:

// $provider.callback.tsx
import { LoaderFunction } from "@remix-run/node";
import { returnToCookie } from "~/cookies";
import { authenticator } from "~/server/auth.server";

export const loader: LoaderFunction = async ({ request, params }) => {
  const returnTo = (await returnToCookie.parse(request.headers.get("Cookie"))) ?? "/";

  return await authenticator.authenticate(params?.provider!, request, {
    successRedirect: returnTo,
    failureRedirect: `/?redirectURL=${returnTo}`,
  });
};

// $provider.tsx
import { ActionFunction, LoaderFunction } from "@remix-run/node";
import { Params } from "@remix-run/react";
import { returnToCookie } from "~/cookies";
import { authenticator } from "~/server/auth.server";

/**
 * For the idea and explanation of implementation see: https://sergiodxa.com/articles/add-returnto-behavior-to-remix-auth
 */
export let action: ActionFunction = ({ request, params }) => login(request, params);
export let loader: LoaderFunction = ({ request, params }) => login(request, params);

async function login(request: Request, params: Params) {
  const url = new URL(request.url);
  const returnTo = url.searchParams.get("redirectURL");

  try {
    return await authenticator.authenticate(params?.provider!, request, {
      successRedirect: returnTo ?? "/",
      failureRedirect: "/",
    });
  } catch (error) {
    if (!returnTo) {
      throw error;
    }
    if (error instanceof Response && isRedirect(error)) {
      error.headers.append("Set-Cookie", await returnToCookie.serialize(returnTo));
      return error;
    }
    throw error;
  }
}

function isRedirect(response: Response) {
  if (response.status < 300 || response.status >= 400) {
    return false;
  }
  return response.headers.has("Location");
}

// auth.server.tsx
import { Authenticator, AuthorizationError } from "remix-auth";
import { FacebookStrategy, GoogleStrategy, SocialsProvider } from "remix-auth-socials";
import { sessionStorage } from "~/server/session.server";
import { SessionUser } from "~/types/session";

interface CMSResponse {
  error?: {
    status: number;
    message: string;
    details: object;
  };
  jwt?: string;
  user?: {
    id: number;
    username: string;
    email: string;
    provider: string;
    confirmed: boolean;
    blocked: boolean;
    createdAt: string;
    updatedAt: string;
    avatar: string;
  };
}

const handleUserAuth = async (accessToken: string, provider: SocialsProvider) => {
  if (accessToken) {
    const res = await fetch(
      `${process.env.CMS_API_URL}/auth/${provider}/callback?access_token=${accessToken}`
    );
    const { jwt, user, error }: CMSResponse = await res.json();

    if (!jwt) {
      throw new AuthorizationError(error?.message);
    }

    const { username, avatar, email } = user!;

    return {
      avatar,
      email,
      jwt,
      name: username,
    };
  }
};

export const authenticator = new Authenticator<SessionUser | undefined>(sessionStorage, {
  sessionKey: "_session",
  throwOnError: true,
});

authenticator.use(
  new GoogleStrategy(
    {
      clientID: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
      callbackURL: `${process.env.APP_URL}/api/auth/${SocialsProvider.GOOGLE}/callback`,
    },
    async ({ accessToken }) => {
      return await handleUserAuth(accessToken, SocialsProvider.GOOGLE);
    }
  )
);

authenticator.use(
  new FacebookStrategy(
    {
      clientID: process.env.FACEBOOK_CLIENT_ID!,
      clientSecret: process.env.FACEBOOK_CLIENT_SECRET!,
      callbackURL: `${process.env.APP_URL}/api/auth/${SocialsProvider.FACEBOOK}/callback`,
    },
    async ({ accessToken }) => {
      return await handleUserAuth(accessToken, SocialsProvider.FACEBOOK);
    }
  )
);

// session.server.ts
import { createCookieSessionStorage } from "@remix-run/node";

const sessionSecret = process.env.SESSION_SECRET;

if (!sessionSecret) {
  throw new Error("SESSION_SECRET must be set");
}

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

export const { getSession, commitSession, destroySession } = sessionStorage;

[sergiodxa]

Is http://localhost:1337/api/auth/facebook/callback?access_token=EAAG3TM...DZD the URL you fetch on handleUserAuth?

[kwiat1990]

It’s a callback for Strapi, so the user gets created in Strapi DB. I get user data from auth provider as well as the data of a created user from my DB. Then auth process gives me a 302 redirect with the mentioned error.

[kwiat1990]

@sergiodxa I think I must had indeed somewhere in my code read the request so that I got the error. I have tested the whole auth once more and it did work until I wanted to console.log response from my CMS inside the handleUserAuth function. With that knowledge I can try to handle any error response from my CMS, which currently won't show any visible auth error for the user.

[Mb1tsi]

Hey, I am working on a react js web app which has google Oauth but the client id I get from google just doesn't work, can someone here get me a client id through their email?

[sergiodxa]

Open a new discussion or ask in the repository of the GoogleStrategy

[Mb1tsi]

this is something you can help me with, just follow the instructions on this video https://youtu.be/ex3FW_40izU