1. In the env variables use your development keys which allow your app to be hosted on any domain
  2. You must host the sign-in and sign-up pages on your react app (rather than using accounts.your.domain which is hosted on Clerk). Use the Clerk sign in and sign up components.
  3. In env variables (or clerk provider), set the sign in and sign up URLs to be the relative path so that it uses the same domain as where the dev server is hosted (https://clerk.com/docs/deployments/clerk-environment-variables#sign-in-and-sign-up-redirects)

    • E.g. NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in , NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up

    • For Vite use VITE_CLERK_SIGN_IN_URL & VITE_CLERK_SIGN_UP_URL

    • For the ClerkProvider, set the props:

              signInUrl={`${window.location.origin}/sign-in`}
        signUpUrl={`${window.location.origin}/sign-up`}
  4. Open app.tempo-dev.app. This is the same Tempo app but hosted on the same domain as the dev server. This allows Clerk to pass the Cookie into the inner iframe.
  5. Find the same project you set up above and open the canvas.
  6. Restart the dev server if it was running before, and to log in to the app open the main storyboard in a new tab by clicking the external link icon on the storyboard header. Log in there then refresh the whole page back in Tempo.

It should all work after that!