feat(remix): Add support for Remix SPA Mode

anagstef commented 3 weeks ago

Description

This PR adds support for the Remix SPA Mode. ref: https://remix.run/docs/en/main/guides/spa-mode

After users have followed the Remix guide to use the SPA mode in their app, they'll need to make the following changes in their Clerk Remix app:

Remove the rootAuthLoader
Move all their Environment Variables inside the options of the ClerkApp component (except Clerk's Secret Key)
Do not use any server-side Clerk function (e.g. all the imported functions coming from "@clerk/remix/ssr.server")

An example app/root.tsx page that uses SPA Mode, could be the following:

import { ClerkApp } from "@clerk/remix";
import {
  Links,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from "@remix-run/react";

function App() {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

export default ClerkApp(App, {
  publishableKey: 'pk_test_XYZ',
  signInUrl: '/sign-in',
  signUpUrl: '/sign-up',
  signInFallbackRedirectUrl: '/',
  signUpFallbackRedirectUrl: '/',
});

Checklist

[x] npm test runs as expected.
[x] npm run build runs as expected.
[ ] (If applicable) JSDoc comments have been added or updated for any package exports
[ ] (If applicable) Documentation has been updated

Type of change

[ ] 🐛 Bug fix
[x] 🌟 New feature
[ ] 🔨 Breaking change
[ ] 📖 Refactoring / dependency upgrade / documentation
[ ] other:

changeset-bot[bot] commented 3 weeks ago

🦋 Changeset detected

Latest commit: 3dd2c034ea81d03fd4d5fcfaa12a271e7ddea641

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

| Name | Type | | ------------ | ----- | | @clerk/remix | Minor |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

anagstef commented 3 weeks ago

!snapshot

clerk-cookie commented 3 weeks ago

Hey @anagstef - the snapshot version command generated the following package versions:	Package	Version
@clerk/chrome-extension	1.0.19-snapshot.vbc54be6
@clerk/clerk-js	5.7.1-snapshot.vbc54be6
@clerk/elements	0.8.0-snapshot.vbc54be6
@clerk/clerk-expo	1.2.2-snapshot.vbc54be6
gatsby-plugin-clerk	5.0.0-beta.45
@clerk/remix	4.2.0-snapshot.vbc54be6

Tip: Use the snippet copy button below to quickly install the required packages. @clerk/chrome-extension

npm i @clerk/chrome-extension@1.0.19-snapshot.vbc54be6 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@5.7.1-snapshot.vbc54be6 --save-exact

@clerk/elements

npm i @clerk/elements@0.8.0-snapshot.vbc54be6 --save-exact

@clerk/clerk-expo

npm i @clerk/clerk-expo@1.2.2-snapshot.vbc54be6 --save-exact

gatsby-plugin-clerk

npm i gatsby-plugin-clerk@5.0.0-beta.45 --save-exact

@clerk/remix

npm i @clerk/remix@4.2.0-snapshot.vbc54be6 --save-exact

anagstef commented 1 week ago

!snapshot

anagstef commented 1 week ago

!snapshot

clerk-cookie commented 1 week ago

Hey @anagstef - the snapshot version command generated the following package versions:	Package	Version
@clerk/chrome-extension	1.1.1-snapshot.ve39e3a5
@clerk/clerk-js	5.7.3-snapshot.ve39e3a5
@clerk/clerk-expo	1.2.4-snapshot.ve39e3a5
gatsby-plugin-clerk	5.0.0-beta.45
@clerk/remix	4.2.0-snapshot.ve39e3a5

Tip: Use the snippet copy button below to quickly install the required packages. @clerk/chrome-extension

npm i @clerk/chrome-extension@1.1.1-snapshot.ve39e3a5 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@5.7.3-snapshot.ve39e3a5 --save-exact

@clerk/clerk-expo

npm i @clerk/clerk-expo@1.2.4-snapshot.ve39e3a5 --save-exact

gatsby-plugin-clerk

npm i gatsby-plugin-clerk@5.0.0-beta.45 --save-exact

@clerk/remix

npm i @clerk/remix@4.2.0-snapshot.ve39e3a5 --save-exact

anagstef commented 1 week ago

!snapshot

clerk-cookie commented 1 week ago

Hey @anagstef - the snapshot version command generated the following package versions:	Package	Version
@clerk/chrome-extension	1.1.1-snapshot.vdf60950
@clerk/clerk-js	5.7.3-snapshot.vdf60950
@clerk/clerk-expo	1.2.4-snapshot.vdf60950
gatsby-plugin-clerk	5.0.0-beta.45
@clerk/remix	4.2.0-snapshot.vdf60950

Tip: Use the snippet copy button below to quickly install the required packages. @clerk/chrome-extension

npm i @clerk/chrome-extension@1.1.1-snapshot.vdf60950 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@5.7.3-snapshot.vdf60950 --save-exact

@clerk/clerk-expo

npm i @clerk/clerk-expo@1.2.4-snapshot.vdf60950 --save-exact

gatsby-plugin-clerk

npm i gatsby-plugin-clerk@5.0.0-beta.45 --save-exact

@clerk/remix

npm i @clerk/remix@4.2.0-snapshot.vdf60950 --save-exact

clerk / javascript