Make auth v2 work on server

[st3phan]

Is making auth v2 work on the serverside on the roadmap?
Looks like logging in on the serverside doesn't set a cookie so logging in actually logs in all connected clients to the same user.
I found out about this while trying Remix Run and I would love to use it together with Nhost.

[elitan]

We don't use cookies for our auth, so that shouldn't be the problem.

Do you have some code to share or some error you're getting that can help us debug this?

[st3phan]

I made a screencast with explanation:
https://www.dropbox.com/s/zvwjxu3z7djotx3/nhost-server-auth.mov?dl=0

Code is pretty simple. It's done in Remix.
Note that the loader and action functions are serverside.

// login.tsx
import { ActionFunction, LoaderFunction, redirect, useTransition } from 'remix';
import nhost from '~/lib/nhost.server';

export const action: ActionFunction = async ({ request }) => {
  const body = await request.formData();
  const email = body.get('email');
  const password = body.get('password');

  await nhost.auth.signIn({
    email,
    password,
  });

  return redirect(`/app/dashboard`);
};

export const loader: LoaderFunction = async ({ request }) => {
  const accessToken = nhost.auth.getAccessToken();
  const isAuthenticated = nhost.auth.isAuthenticated();

  if (accessToken && isAuthenticated) {
    return redirect(`/app/dashboard`);
  }

  return null;
};

export default function Login() {
  return (
    <form action="/login" method="post">
      <div>
        <label>
          Email
          <input type="text" name="email" />
        </label>
      </div>
      <div>
        <label>
          Password
          <input type="password" name="password" />
        </label>
      </div>
      <button type="submit">
        Login
      </button>
    </form>
  );
}

// dashboard.tsx
import { LoaderFunction, useLoaderData } from 'remix';
import nhost from '~/lib/nhost.server';

export const loader: LoaderFunction = async ({ request }) => {
  return nhost.auth.getSession();
};

export default function Dashboard() {
  const session = useLoaderData();
  return (
    <>
      <h1>Dashboard</h1>
      <li>
        <a href="/app/logout">Log out</a>
      </li>
      <pre>{JSON.stringify(session, undefined, 2)}</pre>
    </>
  );
}

// logout.tsx
import { ActionFunction, redirect, useLocation } from 'remix';
import nhost from '~/lib/nhost.server';

export const action: ActionFunction = async ({ request }) => {
  await nhost.auth.signOut();
  return redirect('/login');
};

export default function Logout() {
  return (
    <>
      <h1>Logout</h1>
      <form method="post" action={useLocation().pathname}>
        Are you sure you want to logout?
        <button type="submit">Yes, log me out</button>
      </form>
    </>
  );
}

[Winwardo]

Hi, thanks for the sample code st3phan, and thanks to the NHost maintainers here.

I just wanted to leave a comment for future NHost / Remix integrators about this. This code relies on the fact that the imported nhost object is mutated during the .signIn call, hence how it is able to just call nhost.auth.getSession() in the loader function.
The problem here is that only one user can be logged in at a time - multiple people logging in against the same server will mutate the same nhost object and cause issues, and in the worst case leak the current logged in user's data to another user.

A safer approach involves making a new NHostClient inside every loader or action, and populating it with an access token passed from a cookie in the request.

I'd love to see a version of NHostClient that is framework agnostic that does not mutate itself during sign in, to allow for safer usage during server-side rendering.

[maxfahl]

I would really love to know how to handle this as well. I'm completely new to both Nhost and Remix but have been working with a lot of different platforms such as supabase and firebase in the past. What does nhost.auth.signIn result in? Where do you store the JWT normally? Local storage? Would be nice to be able to alter this behaviour.

[elitan]

We store tokens in localStorage by default but it's customizable:

https://github.com/nhost/nhost/blob/main/packages/nhost-js/src/core/nhost-client.ts#L10

https://github.com/nhost/nhost/blob/main/packages/hasura-auth-js/src/utils/types.ts#L150-L171

[maxfahl]

Thanks @elitan, will check this out!

[maxfahl]

I've been trying to get auth to work server side for a whole day now, and has not moved an inch. I've started to understand the inner working of the auth flow a bit, but that's about it. I guess you guys haven't implemented anything (yet) to help with server side auth?One clue that makes me believe this is true is the callback URL:

https://SITE.UI#refreshToken=899ac095-d42e-449f-be19-2b8b1b95b6d0

The refreshToken is only readable from the client, the server has no clue of what's going on here, if I'm not misstaken.

Is it even possible to use Nhost auth server side? If so, could anyone give any pointer on how to do this? My implementation looks kind of similar to what @st3phan posted above. I've even tried doing:

export const loader: LoaderFunction = async ({ request }) => {´
  return new Promise((resolve, reject) => {
    const unsubsribe = nhostClient.auth.onAuthStateChanged(
      (event: AuthChangeEvent, session: Session | null) => {
        resolve(session)
      }
    )
    // Timeout
    setInterval(() => {
      unsubsribe()
      resolve(nhostClient.auth.getSession())
    }, 1000)
  })
}

The event callback passed to onAuthStateChanged never even gets called.

With the rise of SSR, getting auth to work server side is kind of a big deal.

Let me add that I'm trying to implement authentication using the magic email sign in. Also, I really love what you guys are doing here, this is not critisism in any way. Jus trying to make a living like the rest of the undead.

[elitan]

Hey Max, and sorry about the current lack of documentation and examples. We hope to have SSR examples ready by the end of this month.

We've been mostly focused on client-side auth up until this point.

[maxfahl]

Thank you @elitan, looking forward to it!

[plmercereau]

Hello,
We implemented SSR with Nextjs:
https://docs.nhost.io/reference/nextjs

[gevera]

Is there a more generic way of doing this? Im sure besides Next there are other frameworks that do SSR. The lack of implementation for other frameworks is a no go for me. Ill explain you why.
I do fetch graphql data with Houdini for SvelteKit, and its done server side. However, in order to do that, I need to set the token on server side, and Nhost Auth client doesnt support it. Thats a shame, really.