amplify-js: User object not detected in Remix.js SSR

I’m able to reproduce this issue, both when a user is logged in and when no user is logged in.

Adding authMode: "AMAZON_COGNITO_USER_POOLS", to the GQL mutation doesn’t make a difference for me.

I’ll keep looking into this and keep you posted!

This issue is also in Next.js

Reading the code of withSSRContext I found the solution for remix:

index.tsx

import type { LoaderFunction } from '@remix-run/node';

import type { User } from '~/entities/auth';

import { getUserFromRequest } from '~/lib/amplify/auth/users'

type LoaderData = { user: User | null };

export const loader: LoaderFunction = async ({ request }) => {
  const user = await getUserFromRequest(request);
  
  return json<LoaderData>({ user });
}

lib/amplify/auth/users.ts

import type { Auth as AuthClass } from '@aws-amplify/auth';
import { withSSRContext } from 'aws-amplify';
import get from 'lodash/get';

import type { CognitoUserAttributes, User } from '~/entities/auth';

import logger from '../logger';

export async function getUserFromRequest(request: Request) {
  try {
    const Auth = withSSRContext({
      req: { headers: { cookie: request.headers.get('cookie') } },
    }).Auth as typeof AuthClass;

    const cognitoUser = await Auth.currentAuthenticatedUser();
    const attributes = get<CognitoUserAttributes>(
      cognitoUser,
      'attributes',
      {} as CognitoUserAttributes,
    );

    const user: User = {
      id: cognitoUser.username,
      name: attributes.name,
      email: attributes.email,
    };

    return user;
  } catch (error) {
    logger.debug(`user not authenticated ${error}`);

    return null;
  }
}

Hi all 👋🏾 - following up on this issue. The two key things needed to get this working when attempting to get the auth session on the server side are as follows:

• You will need to login the user on the client as @visomi-dev mentioned
• Pass the cookies to withSSRContext as shown on this comment
• Be sure to set ssr: true in your Amplify.configure()

With the above configured, you will be able to use withSSRContext in your loader() or action() functions. I have setup a simple working example here that uses withSSRContext in a loader() function:

• https://github.com/nadetastic/remix-amplified/tree/main

Thanks for all the input and discussion on this issue, let me know if there are any other questions on this.

Many thanks to @visomi-dev and @DavidBrear – I spent over a day going around and around trying to work out how to get Auth working server side and your two code snippets have been the answer I was looking for.

@DavidBrear try to call SignIn on frontend directly to aws cognito (no on the server-side).

import { useState } from 'react';
// previously configure amplify with SSR flag
import { Auth } from 'amplify' 

function SignIn() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const onSubmitHandler = async (event) => {
    event.preventDefault();
    
    try {
      await Auth.SignIn(email, password);
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <form onSubmit={onSubmitHandler}>
      <input name="email" type='email' onInput={(event) => setEmail(event.target.value)} />
      <input name="password" type='password' onInput={(event) => setPassword(event.target.value)} />
    </form>
  )
}

@visomi-dev 's solution https://github.com/aws-amplify/amplify-js/issues/9780#issuecomment-1254262202 ☝️ up there worked for me. One thing I noticed was when you do Auth.signIn in the action method it won’t set the cookies and actually doesn’t return any cookies. I did the auth sign in with:

login.tsx

export const action: ActionFunction = async ({ request }) => {
  const formData = await request.formData();
  const email = formData.get("email");
  const password = formData.get("password");
  const SSR = withSSRContext({ req: request });
  const user = await SSR.Auth.signIn(email, password);
  return saveAmplifyCookies(user.pool.storage.store);
}

then in session.server.ts

export async function saveAmplifyCookies(cookies: Record<string, string>) {
  const headers = new Headers();
  Object.keys(cookies).forEach((key) => {
    headers.append(
      "Set-Cookie",
      `${key}=${cookies[key]}; Max-Age=157680000; Path=/; HttpOnly; SameSite=Lax`,
    );
  });
  return redirect("/", { headers });
}

@chrisbonifacio

The bug occurs because the username contains @ but in cookies the @ becomes %40, on the following line the username contains @ instead of %40 https://github.com/aws-amplify/amplify-js/blob/main/packages/amazon-cognito-identity-js/src/CognitoUser.js#L1388

I guess the encodeURIComponent solve the problem