https://supertokens.com/
Join Discord
How do you handle routing without react-router-dom?
# support-questions-legacy
c
How do you handle routing without react-router-dom?
n
Refer to this step
And select no
c
Copy code
if (SuperTokens.canHandleRoute()) {
            // This renders the login UI on the /login route
            return SuperTokens.getRoutingComponent()
        }
can you tell me what getRoutingComponent() does internally
n
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
c
when does 
SuperTokens.canHandleRoute()
Becomes true?
n
The react SDK has some pre configured paths it can handle, when the browser visits one of those routes the function returns true
c
Copy code
{
    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
n
Hmm if you set it to /auth does the login screen show on http://localhost:3000/auth?
c
then` Cannot GET /auth`
n
What framework are you using for your frontend?
Also for your backend
c
react, node(have not done the backend setup of supertokens yet)
n
Can I see the code for your apps render function
c
Copy code
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>
  );
n
When you set it to login, what does your console log output?
c
false
n
Hmm, can you open an issue about this in the react sdk repo? We will take a look at it
c
ok, please share the repo link
n
c
created issue: https://github.com/supertokens/supertokens-auth-react/issues/611 let me know if any other detail required
n
Thanks we’ll take a look
4 Views
PreviousNext
Powered by

SuperTokens.com

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

Powered by