fix(clerk): make useAuth's loading prop track the Clerk client

[jtoar]

I think something like this is the fix for https://community.redwoodjs.com/t/redwood-v4-0-and-clerk-dev-cannot-render-component-as-a-sessions-already-exists-redirecting-to-the-home-url/4567/11.

The gist of the problem is in the "try" part of the try-catch block in useReauthenticate here:

redwood/packages/auth/src/AuthProvider/useReauthenticate.ts

Lines 28 to 36 in 2813199

	try {
	const userMetadata = await authImplementation.getUserMetadata()
	if (!userMetadata) {
	setAuthProviderState({
	...notAuthenticatedState,
	client: authImplementation.client,
	})
	} else {

Here's notAuthenticatedState for completeness:

redwood/packages/auth/src/AuthProvider/useReauthenticate.ts

Lines 9 to 15 in 2813199

	const notAuthenticatedState = {
	isAuthenticated: false,
	currentUser: null,
	userMetadata: null,
	loading: false,
	hasError: false,
	}

What this means is that if we can't get userMetadata, we consider the auth provider to have loaded. loading is false. But this isn't how Clerk works. Clerk isn't finished loading until the client is on window object (I think).

The work-in-progress fix in this PR is simple, maybe too simple? It doesn't use React APIs. If we want to use React APIs, we should reach for Clerk's useAuth hook and destructure out the isLoaded prop. But that would require changing the API of createAuthImplementation et. al a bit (I think—we could just add custom logic to useReauthenticate since we officially support Clerk, but this would kind of go against all the work we did to decouple auth in the first place).

There's a couple more changes I'd like to make in this fix:

• I'm not sure that we need ClerkLoaded at all in the web/src/auth.tsx template; I think it may actually be bad because it blocks rendering of its children till Clerk has loaded. Ideally the AuthProvider should handle that so the Router can display the whileLoadingAuth component

• it sounds like Clerk's useAuth hook is newer and more recommended than it's useUser hook; maybe we should go with that?

  See https://clerk.dev/docs/reference/clerk-react/useauth:

  This new hook should be used instead of:

  • useSession() , to access getToken() or the sessionId
  • useUser() , to access getToken() for integrations
  • useClerk() , to access signOut()

[replay-io]

15 replays were recorded for ad60357.

0 Failed

15 Passed

• useAuth hook, auth redirects checks
• Check that tags are rendering the correct dynamic data
• Check that a specific blog post is prerendered
• Check that about is prerendered
• Check that homepage is prerendered
• Check that you can navigate from home page to specific blog post
• Waterfall prerendering (nested cells)
• RBAC: Admin user should be able to delete contacts
• RBAC: Should not be able to delete contact as non-admin user
• Smoke test with dev server
• Smoke test with rw serve
• Loads Cell mocks when Cell is nested in another story
• Loads Cell Stories
• Loads MDX Stories
• Mocks current user, and updates UI while dev server is running

View test run on Replay ↗︎

[Tobbe]

Great work @jtoar! Excellent debugging.

it sounds like Clerk's useAuth hook is newer and more recommended than it's useUser hook; maybe we should go with that?

The way I read their documentation, you should only switch from useUser to useAuth if you use getToken from useUser.

[jtoar]

Closing in favor of #7608