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:
1npm 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
:
1import { getAuth } from "@clerk/remix/ssr.server";23export const loader: LoaderFunction = async ({ request }) => {4const { userId, sessionId, getToken } = await getAuth(request);5// fetch data6return { yourData: 'here' };7}
On v2.x
:
1import { getAuth } from "@clerk/remix/ssr.server";23export const loader: LoaderFunction = async (args) => {4const { userId, sessionId, getToken } = await getAuth(args);5// fetch data6return { 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:
1import { users } from "@clerk/remix/api.server";23export const loader: LoaderFunction = async ({ request }) => {4const { userId } = await getAuth(request);5let user;6if (userId) {7user = await users.getUser(userId);8}9return {10userFirstName: user?.firstName11};12};
On v2.x
, instead of the above, fetching data from Clerk Backend API is now done using the createClerkClient
, as shown below:
1import { createClerkClient } from '@clerk/remix/api.server';23const { lastName, id, lastSignInAt } = await createClerkClient({4apiKey: 'YOUR_API_KEY_GOES_HERE'5}).users.getUser('USER_ID_GOES_HERE');67console.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.