Upgrade @clerk/remix from 1.x to 2.x

If you are adding Clerk to your Remix project for the first time see the Remix Authentication

Overview

This is a page with all the changes you need to make to use @clerk/remix on version 2.0.0 or greater, if you are already on 1.x.

Updating the package

First of all, you need to update your package to the latest version. On the root of your project run:

1
npm i @clerk/remix@latest

Breaking changes

`getAuth`

The getAuth has a new, simpler signature. Use getAuth(loaderArgs) instead of getAuth(loaderArgs or Request).

On v1.x:

1
import { getAuth } from "@clerk/remix/ssr.server";
2

3
export const loader: LoaderFunction = async ({ request }) => {
4
  const { userId, sessionId, getToken } = await getAuth(request);
5
  // fetch data
6
  return { yourData: 'here' };
7
}

On v2.x:

1
import { getAuth } from "@clerk/remix/ssr.server";
2

3
export const loader: LoaderFunction = async (args) => {
4
  const { userId, sessionId, getToken } = await getAuth(args);
5
  // fetch data
6
  return { yourData: 'here' };
7
}

Data Fetching

On v1.x, you could use the exported resources from @clerk/remix/api.server, like users, allowlistIdentifiers, clients, smsMessages, sessions, phoneNumbers, organizations, emails, emailAddresses, invitations.

For example:

1
import { users } from "@clerk/remix/api.server";
2

3
export const loader: LoaderFunction = async ({ request }) => {
4
    const { userId } = await getAuth(request);
5
    let user;
6
    if (userId) {
7
        user = await users.getUser(userId);
8
    }
9
    return {
10
        userFirstName: user?.firstName
11
    };
12
};

On v2.x, instead of the above, fetching data from Clerk Backend API is now done using the createClerkClient, as shown below:

1
import { createClerkClient } from '@clerk/remix/api.server';
2

3
const { lastName, id, lastSignInAt }  = await createClerkClient({
4
  apiKey: 'YOUR_API_KEY_GOES_HERE'
5
}).users.getUser('USER_ID_GOES_HERE');
6

7
console.log(`User with id ${id} last sign in was ${lastSignInAt}`);

Debug

The window.__clerk_debug utility now returns a debug object instead of a string.