SuperTokens is an open source authentication solution offering features like: Different types of login: Email / password, Passwordless (OTP or Magic link based).

SuperTokens.com

How do you handle routing without react-router-dom?

I'm setting up a new app using: https://supertokens.com/docs/passwordless/pre-built-ui/setup/frontend

https://supertokens.com/docs/passwordless/pre-built-ui/setup/frontend#3-setup-routing-to-show-the-login-ui

`if (SuperTokens.canHandleRoute()) {
            // This renders the login UI on the /login route
            return SuperTokens.getRoutingComponent()
        }`

can you tell me what getRoutingComponent() does internally

Based on the current url of the browser it will return the appropriate component from the SuperTokens sdk

For example /auth would return the login form

when does `SuperTokens.canHandleRoute()` Becomes true?

The react SDK has some pre configured paths it can handle, when the browser visits one of those routes the function returns true

`{
    appName: my-app',
    apiDomain: 'http://localhost:80',
    websiteDomain: 'http://localhost:3000',
    apiBasePath: '/auth',
    websiteBasePath: '/'
  }`
for `websiteBasePath: '/'` I can see the login screen
but if I set `websiteBasePath: '/login',`
and access http://localhost:3000/login, then getting: `Cannot GET /login`

Hmm if you set it to /auth does the login screen show on http://localhost:3000/auth?

What framework are you using for your frontend?

react, node(have not done the backend setup of supertokens yet)

Can I see the code for your apps render function

`import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import SuperTokens, { SuperTokensWrapper } from 'supertokens-auth-react';
import Passwordless from 'supertokens-auth-react/recipe/passwordless';
import Session from 'supertokens-auth-react/recipe/session';

SuperTokens.init({
  appInfo: {
    appName: 'my-app',
    apiDomain: 'http://localhost:80',
    websiteDomain: 'http://localhost:3000',
    apiBasePath: '/auth',
    websiteBasePath: '/',
  },
  recipeList: [
    Passwordless.init({
      contactMethod: 'EMAIL_OR_PHONE',
    }),
    Session.init(),
  ],
});

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
console.log('sup: ', SuperTokens.canHandleRoute());
if (SuperTokens.canHandleRoute()) {
  // This renders the login UI on the /login route
  root.render(SuperTokens.getRoutingComponent());
} else
  root.render(
    <React.StrictMode>
      <SuperTokensWrapper>
        <App />
      </SuperTokensWrapper>
    </React.StrictMode>
  );`

When you set it to login, what does your console log output?

Hmm, can you open an issue about this in the react sdk repo? We will take a look at it

https://github.com/supertokens/supertokens-auth-react

created issue: https://github.com/supertokens/supertokens-auth-react/issues/611
let me know if any other detail required