https://supertokens.com/ logo
Title
c

chill_cheese

11/04/2022, 1:19 PM
How do you handle routing without react-router-dom?
Refer to this step
And select no
c

chill_cheese

11/04/2022, 1:24 PM
if (SuperTokens.canHandleRoute()) {
            // This renders the login UI on the /login route
            return SuperTokens.getRoutingComponent()
        }
can you tell me what getRoutingComponent() does internally
n

nkshah2

11/04/2022, 1:25 PM
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

chill_cheese

11/04/2022, 1:39 PM
when does
SuperTokens.canHandleRoute()
Becomes true?
n

nkshah2

11/04/2022, 1:40 PM
The react SDK has some pre configured paths it can handle, when the browser visits one of those routes the function returns true
c

chill_cheese

11/04/2022, 1:51 PM
{
    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

nkshah2

11/04/2022, 1:52 PM
Hmm if you set it to /auth does the login screen show on http://localhost:3000/auth?
c

chill_cheese

11/04/2022, 1:52 PM
then` Cannot GET /auth`
n

nkshah2

11/04/2022, 1:53 PM
What framework are you using for your frontend?
Also for your backend
c

chill_cheese

11/04/2022, 1:54 PM
react, node(have not done the backend setup of supertokens yet)
n

nkshah2

11/04/2022, 1:55 PM
Can I see the code for your apps render function
c

chill_cheese

11/04/2022, 1:56 PM
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

nkshah2

11/04/2022, 1:58 PM
When you set it to login, what does your console log output?
c

chill_cheese

11/04/2022, 1:58 PM
false
n

nkshah2

11/04/2022, 1:59 PM
Hmm, can you open an issue about this in the react sdk repo? We will take a look at it
c

chill_cheese

11/04/2022, 2:00 PM
ok, please share the repo link
c

chill_cheese

11/04/2022, 2:15 PM
created issue: https://github.com/supertokens/supertokens-auth-react/issues/611 let me know if any other detail required
n

nkshah2

11/04/2022, 2:22 PM
Thanks we’ll take a look