feat(remix): Add support for Remix SPA Mode by anagstef · Pull Request #3580 · clerk/javascript

anagstef · 2024-06-17T19:52:51Z

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

npm test runs as expected.
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

changeset-bot · 2024-06-17T19:52:54Z

🦋 Changeset detected

Latest commit: 3dd2c03

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 · 2024-06-17T19:53:00Z

!snapshot

…mode

clerk-cookie · 2024-06-17T19:57:25Z

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

…mode

anagstef · 2024-06-27T12:26:44Z

!snapshot

anagstef · 2024-06-27T12:34:53Z

!snapshot

clerk-cookie · 2024-06-27T12:38:35Z

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 · 2024-06-27T12:52:27Z

!snapshot

clerk-cookie · 2024-06-27T12:57:07Z

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

panteliselef · 2024-06-28T06:56:55Z

+  if (typeof window !== 'undefined' && typeof window.__remixContext?.isSpaMode !== 'undefined') {
+    return window.__remixContext.isSpaMode;
+  }


@anagstef could you add a link where window.__remixContext.isSpaMode is mentioned in their docs ? I couldn't find it.

@panteliselef It's not mentioned because it is kinda internal. My initial proposal was to introduce a spaMode: true prop option, but discussed with @octoper and this solution has better DX.

…mode

feat(remix): Add support for Remix SPA Mode

bc54be6

anagstef self-assigned this Jun 17, 2024

clerk-cookie added the remix label Jun 17, 2024

Merge branch 'main' into stefanos/sdk-1819-add-support-for-remix-spa-…

92a63b3

…mode

Stefanos Anagnostou and others added 2 commits June 27, 2024 15:25

Use the window info to determine the SPA Mode

b763f07

Merge branch 'main' into stefanos/sdk-1819-add-support-for-remix-spa-…

de86784

…mode

Fix lint error

e39e3a5

Access window only when it's available

df60950

Fix wording

8307120

anagstef marked this pull request as ready for review June 27, 2024 13:18

anagstef requested review from LekoArts, dimkl, nikosdouvlis and octoper June 27, 2024 13:18

octoper approved these changes Jun 27, 2024

View reviewed changes

Comment thread packages/remix/src/utils/utils.ts Outdated

panteliselef approved these changes Jun 28, 2024

View reviewed changes

dimkl approved these changes Jun 28, 2024

View reviewed changes

Stefanos Anagnostou and others added 2 commits June 28, 2024 14:06

Change getSpaMode to inSpaMode

3f654bc

Merge branch 'main' into stefanos/sdk-1819-add-support-for-remix-spa-…

3dd2c03

…mode

anagstef merged commit 2f8e79e into main Jun 28, 2024

anagstef deleted the stefanos/sdk-1819-add-support-for-remix-spa-mode branch June 28, 2024 11:27

clerk-cookie mentioned this pull request Jun 28, 2024

ci(repo): Version packages #3631

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(remix): Add support for Remix SPA Mode - #3580

feat(remix): Add support for Remix SPA Mode#3580
anagstef merged 9 commits into
mainfrom
stefanos/sdk-1819-add-support-for-remix-spa-mode

anagstef commented Jun 17, 2024 •

edited

Loading

Uh oh!

changeset-bot Bot commented Jun 17, 2024 •

edited

Loading

Uh oh!

anagstef commented Jun 17, 2024

Uh oh!

clerk-cookie commented Jun 17, 2024

Uh oh!

anagstef commented Jun 27, 2024

Uh oh!

anagstef commented Jun 27, 2024

Uh oh!

clerk-cookie commented Jun 27, 2024

Uh oh!

anagstef commented Jun 27, 2024

Uh oh!

clerk-cookie commented Jun 27, 2024

Uh oh!

Uh oh!

panteliselef Jun 28, 2024

Uh oh!

anagstef Jun 28, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Uh oh!

Conversation

anagstef commented Jun 17, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checklist

Type of change

Uh oh!

changeset-bot Bot commented Jun 17, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

anagstef commented Jun 17, 2024

Uh oh!

clerk-cookie commented Jun 17, 2024

Uh oh!

anagstef commented Jun 27, 2024

Uh oh!

anagstef commented Jun 27, 2024

Uh oh!

clerk-cookie commented Jun 27, 2024

Uh oh!

anagstef commented Jun 27, 2024

Uh oh!

clerk-cookie commented Jun 27, 2024

Uh oh!

Uh oh!

panteliselef Jun 28, 2024

Choose a reason for hiding this comment

Uh oh!

anagstef Jun 28, 2024

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

anagstef commented Jun 17, 2024 •

edited

Loading

changeset-bot Bot commented Jun 17, 2024 •

edited

Loading