I would consider upgrading from React Router 6.4 to Remix but there's also no example of how to use this on Remix SPA mode (which is what I would use, because my backend is a Express server).
The main problem is that the components are tied to other things, I don't know why that's the case when it could just be etc.
This is my main.tsx code:
import React from 'react'
import ReactDOM from 'react-dom/client'
import { RouterProvider } from 'react-router-dom'
import { Toaster } from '@/components/ui/toaster'
import { ThemeProvider } from '@/components/theme-provider'
import { ResponsiveHelper } from '@/components/custom/responsive-helper'
import router from '@/router'
import '@/index.css'
import SuperTokens, { SuperTokensWrapper } from 'supertokens-auth-react'
import ThirdPartyEmailPassword, {
Github,
Google,
Facebook,
Apple,
} from 'supertokens-auth-react/recipe/thirdpartyemailpassword'
import Session from 'supertokens-auth-react/recipe/session'
SuperTokens.init({
appInfo: {
// learn more about this on https://supertokens.com/docs/thirdpartyemailpassword/appinfo
appName: 'Blueprint',
apiDomain: 'http://localhost:8080',
websiteDomain: 'http://localhost:3000',
apiBasePath: '/auth',
websiteBasePath: '/auth',
},
recipeList: [
ThirdPartyEmailPassword.init({
signInAndUpFeature: {
providers: [
Github.init(),
Google.init(),
Facebook.init(),
Apple.init(),
],
},
}),
Session.init(),
],
})
ReactDOM.createRoot(document.getElementById('root')!).render(
<SuperTokensWrapper>
<ThemeProvider defaultTheme='dark' storageKey='vite-ui-theme'>
<RouterProvider router={router} />
<Toaster />
<ResponsiveHelper />
</ThemeProvider>
</SuperTokensWrapper>
)
You'll notice there's no
So there's no place to insert this code:
{/*This renders the login UI on the /auth route*/}
{getSuperTokensRoutesForReactRouterDom(reactRouterDom, [ThirdPartyEmailPasswordPreBuiltUI])}
{/*Your app routes*/}
React Router 6.22 uses different routing than the previous 6.* versions.
The tutorial doesn't work, and I've spent 2 hours changing things and trying but I can't get it to work.
I would highly appreciate some help. An user on Discord reported the same problem (https://discord.com/channels/603466164219281420/1175886717245472798) but no solution was given.
I would consider upgrading from React Router 6.4 to Remix but there's also no example of how to use this on Remix SPA mode (which is what I would use, because my backend is a Express server).
The main problem is that the components are tied to other things, I don't know why that's the case when it could just be etc.
This is my main.tsx code:
You'll notice there's no
So there's no place to insert this code:
Sample router.tsx file: