Passing accessToken from server to client

[thomasballinger]

I'd like to pass an initial accessToken from the server into the client AuthKit component.

---

For routes protected by middleware, the access token and user can be loaded in a server component with

const { accessToken } = await withAuth();

but if a child client component renders an AuthKitProvider, it will take a while for that AuthKitProvider to have an access token to use.

  ...
    <AuthKitProvider>
      <MyComponent/>
    </AuthKitProvider>
  ...

function MyComponent() {
  const { user, loading: userLoading } = useAuth();
  const { accessToken, loading: tokenLoading } = useAccessToken();
  if (accessToken) {
    return <MyApp accessToken={accessToken}/>
  }
  return <Loading />
}

Here we'll initially render <Loading /> . I'd like to pass the access token from the server through to my application to get a head start. I could do this without AuthKit's help,

  ...
    <AuthKitProvider>
      <MyComponent accessToken={accessToken} />
    </AuthKitProvider>
  ...

but it would be more convenient (I wouldn't need to wrap the AuthKit useAuth() in my own wrapper hook everywhere) if I could pass this token to AuthKit:

  ...
    <AuthKitProvider initialAccessToken={accessToken} >
      <MyComponent />
    </AuthKitProvider>
  ...

Is this something that makes sense in authkit-nextjs?

[nicknisi]

I'm thinking about alternative solutions. We're pretty sensitive to the accessToken being cached/embedded in the page itself, which I worry this would cause.

[thomasballinger]

@nicknisi curious if you've come up with anything. For now to deal with the flash it would be helpful to know in the first return from useAuth() whether we should expect an access token to be available, so we can wait for it if so.