@rp_st Hey guys, Do you have an SDK for Remix?

hey @joe80813 the integration guide is coming very soon (1 few days). @Darko can help here.

1 more day?

sorry, i meant few more days

Is that an SDK? right now you don't support Remix yet?

we do support remix. You can use our supertokens-auth-react and supertokens-node sdk to add supertokens to a remix app. Whats missing is an example app / guide on how to do that, which is coming soon

Thank you. Hoping to see the guide very soon 🙂

hey @joe80813

Thanks Darko. Just wanted to ask if you have a guide on how to set it up from scratch? 🙂 I'm using Remix Vite Express. Thank you.

not in writing, no

Got it. Thank you 🙂

you can see this: https://github.com/supertokens/create-supertokens-app/pull/98. It's still WIP though, but 90% there,.

Thanks a lot!

yeah, thought about it too

How do you call the

env

here? Still using

process.env...

? Doesn't seem to work

there's a workaround

@Darko Separate PR? Could you share some code here. Currently testing your work 😉

sorry, meant commit over the PR 😄

Sure.

yeah

Is this correct? define: { "process.env": { TEST_URL: process.env.TEST_URL, }, },

yep, should be fine in theory

yeah it seems it still doesn't work

hmph

Well just copied your latest updates. Let me check if I miss something hmm

do you have it somewhere public?

Nevermind. Fixed it 🙂 Btw, I think you should replace your import of

react-router-dom

to

@remix-run/node

or

@remix-run/react

Saw it in some of your files

hmph, right

Random Question: Do we need to write some supertokens code in the

_index.tsx

besides the purpose of displaying user data? I tried removing it and it still works. It still redirects to the login page when unauthenticated. I ask this question because if an app has multiple pages/routes, do we need to declare this in every page?

ah right, having a middleware

Yes. that's right. They don't have it yet. But what's the purpose of your code in the

root.tsx

though?

<SuperTokensWrapper>
                    {isUnprotectedRoute ? (
                        <Outlet />
                    ) : (
                        <SessionAuth>
                            <Outlet />
                        </SessionAuth>
                    )}
                </SuperTokensWrapper>

ah right

But that alone works. I tried removing code related to supertokens in the

_index.tsx

and it still redirected me to the auth page when unautheticated 🙂

the loader code, you mean?

Yes. that one.

hmph

Thank you. and also the

<SessionAuthForRemix>

in the return.

so thinking out loud

we have that in there cause if the claims are invalid, then the on the frontend will redirect to the right place (for example, emial verification page in case the email verification claims failed)

oh right

All right. Thanks guys. So we'll have to do this in every page/route then? 🙂

Yea. Everytime you want to do SSR

Alright. Are there anything else you're working on the PR? Seems all the issues are resolved. Probably fix the

env

? 🙂

pending a review, it's going in the CLI

Yeah. this doesn't seem to work. Can you try on your end? I have an .

env

file:

SUPERTOKENS_CONNECTION_URI=https://s......
SUPERTOKENS_API_KEY=v.....

then on the

vite.config

, I have this

import { vitePlugin as remix } from "@remix-run/dev";
import { installGlobals } from "@remix-run/node";
import { flatRoutes } from "remix-flat-routes";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

installGlobals();

export default defineConfig({
  server: {
    port: 3000,
  },
  plugins: [
    remix({
      ignoredRouteFiles: ["**/*.css"],
      routes: async (defineRoutes) => {
        return flatRoutes("routes", defineRoutes);
      },
    }),
    tsconfigPaths(),
  ],
  define: {
    "process.env": {
      SUPERTOKENS_CONNECTION_URI: process.env.SUPERTOKENS_CONNECTION_URI,
      SUPERTOKENS_API_KEY: process.env.SUPERTOKENS_API_KEY,
    },
  },
});

How should I call this on a file? Like this?

export let backendConfig = (): TypeInput => {
    return {
        supertokens: {
            connectionURI: process.env.SUPERTOKENS_CONNECTION_URI,
            apiKey: process.env.SUPERTOKENS_API_KEY
        },
        appInfo,
        recipeList: [
            PasswordlessNode.init({
                contactMethod: "EMAIL_OR_PHONE",
                flowType: "USER_INPUT_CODE_AND_MAGIC_LINK",
            }),
            SessionNode.init(),
            Dashboard.init(),
            UserRoles.init(),
        ],
        isInServerlessEnv: true,
        framework: "custom",
    };
};

will do, first chance I get

In

vite.config.ts

, what's the purpose of

installGlobals();

?

Hmm. Didn't encounter that error even after removing

installGlobals

. This is my

entry.server.ts

not in this case, no

Ok thank you

🤔

This code overrides the process.env being called on other files. define: { "process.env": {}, },

hmph

@Darko Seems to work now. Tried this one. https://github.com/vitejs/vite/issues/1973#issuecomment-815695512 But another person commented: "This works for me while development but after build process becomes undefined." I haven't tried building it though https://github.com/vitejs/vite/issues/1973#issuecomment-820343918 and btw, I just used

process.env

not

import.meta.env

I suspect there's something missing in the docs for porting to vite from the remix compiler

Hey guys, I have some questions: 1. Are we using

routes

>

sessioninfo.$.tsx

? What's the purpose of it? 2. Is

apiBasePath

in your example is the

routes

>

supertokens.$.tsx

? What's the purpose of it? 3. Is

websiteBasePath

in your example is the

routes

>

auth.$.tsx

? What's the purpose of it? Is it the path where our login UI will be rendered

1. Its just an example api 2. It's the route which uses our middleware and exposes the API for the frontend. 3. Yes, path where our pre built UI ui will be rendered

Oh ok. So we can remove

sessioninfo.$.tsx

?

yup, you can

Hi again, What's a good replacement for this as we want to avoid using

any

. Thank you. 1. https://github.com/supertokens/create-supertokens-app/blob/master/boilerplate/fullstack/remix/app/superTokensHelpers.ts#L106 2. https://github.com/supertokens/create-supertokens-app/blob/master/boilerplate/fullstack/remix/app/superTokensHelpers.ts#L172

first one seems to be a build issue

Alright, will take a look at it. Thanks for the quick reply.

which version of supertokens-web-js are you using?

I only installed these two "supertokens-auth-react": "^0.39.0", "supertokens-node": "^17.0.2"

can i see your package-lock.json?

Let me find it. I don't need to install

supertokens-web-js

, right?

you don't.

I can't seem to find any lock file. But I saw a proj on our turborepo that has this

"supertokens-web-js": "^0.9.1"

Problems it conflicts with mine?

u need to get 0.10.0 version of supertokens-web-js version

But it's not connected to my proj though. Maybe I'll just install "supertokens-web-js": "^0.10.0" on my own proj?

i guess, yea

Sorry but can you further elaborate this? Cause I'm confused since we already have a checker if you're authenticated or not in the

root.tsx

. Thank you.

a session may exist, but the claims may be invalid based on your config. For example, if you want email verification always, the session may exists for an unverified email, in which case the claim error will come

So in simpler terms, imagine logging in to the app that requires email verification. You might be able to log in and create a session, but you won't be able to access certain features until you verify your email? Is this correct?

Yea.

What other scenarios are there besides this one, or is it just this alone?

Depends on your configurations. If you have added MFA, or if you have added some other global claim validator.

Thanks. We can't include this condition in the

root.tsx

?

Not sure. But it’s included whenever you call the session verification function

I'm having a TS error on this line https://github.com/supertokens/create-supertokens-app/blob/d7843f56bd91d50a15493e6bb3d93bc9be48cdef/boilerplate/fullstack/remix/app/root.tsx#L10 This one ------>

frontendConfig()

It says something like

whats the vlaue of the config you have set?

This is the

frontend.tsx

import type { SuperTokensConfig } from "supertokens-auth-react/lib/build/types";
import Session from "supertokens-auth-react/recipe/session/index.js";
import ThirdPartyEmailPasswordReact from "supertokens-auth-react/recipe/thirdpartyemailpassword/index.js";
import { ThirdPartyEmailPasswordPreBuiltUI } from "supertokens-auth-react/recipe/thirdpartyemailpassword/prebuiltui.js";
import { appInfo } from "./appInfo";

export const frontendConfig = (): SuperTokensConfig => {
    return {
        appInfo,
        recipeList: [
            ThirdPartyEmailPasswordReact.init({
                signInAndUpFeature: {
                    providers: [ThirdPartyEmailPasswordReact.Google.init()],
                },
            }),
            Session.init(),
        ],
    };
};

export const PreBuiltUIList = [ThirdPartyEmailPasswordPreBuiltUI];

can you use our CLI to generate a new remix app and see the config from there?

Can you share the link?

use

npx create-supertokens-app@latest

Alright

i think yea

It doesn't highlight that error when created via your cli. Maybe we have a stricter linting?

Hmm. Maybe. If you can replicate this issue in our demo app, we will be happy to sort it out

I experience oftentimes blank white page. However when I commented out this code in the

root.tsx

, it got fixed. I also have to manually add

/auth

to the url too.

<SuperTokensWrapper>
{isUnprotectedRoute ? (
    <Outlet />
) : (
    <SessionAuth>
        <Outlet />
    </SessionAuth>
)}

<ScrollRestoration />
<Scripts />
</SuperTokensWrapper>

Can you reproduce it in our demo app?

I'll try but your demo app works well. It's an intermittent issue