https://supertokens.com/ logo
Join Discord
Powered by
Hi there, I am trying to customize a bit the behav...
# support-questions-legacy
y
Hi there, I am trying to customize a bit the behaviour of supertokens in react. With the default react/flask instructions, everything works well. What I want to achieve is to render the login ui in the / path with some extra content around it. Followed the instructions here https://supertokens.com/docs/thirdpartyemailpassword/common-customizations/embed-sign-in-up-form but it ended up in an infinite loop of redirects. Not sure what exactly I am doing wrong. Also not sure how to use SuperTokensWrapper in the case of embedding sign in. Is there anything I should check? Or a working example I can have a look?
r
Hey! SuperTokensWrapper should wrap your whole app.
The constant redirection could be happening cause you are wrapping your custom path with a ThirdPartyEmailPasswordAuth component?
y
Hi! I am not wrapping it with ThirdPartyEmailPasswordAuth. works ok when I am not logged in, but when I do login, the infinite loop happens
r
hmm. Can I see some code for how you made this component and how you are adding this component to your route?
y
sure!
Copy code
SuperTokens.init({
    appInfo: {
        appName: "SuperTokens Demo App", // TODO: Your app name
        apiDomain: getApiDomain(), // TODO: Change to your app's API domain
        websiteDomain: getWebsiteDomain(), // TODO: Change to your app's website domain
    },
    recipeList: [
        ThirdPartyEmailPassword.init({
            signInAndUpFeature: {
                providers: [Google.init()],
                disableDefaultUI: true,
            },
        }),
        Session.init(),
    ],
});


function App() {
  return (
      <SuperTokensWrapper>
          <div className="App">
              <Router>
                  <div className="fill">
                      <Routes>
                          {/* This shows the login UI on "/auth" route */}
                          {getSuperTokensRoutesForReactRouterDom(require("react-router-dom"))}

                          <Route
                              path="/"
                              element={
                                  /* This protects the "/" route so that it shows
                                      <Home /> only if the user is logged in.
                                      Else it redirects the user to "/auth" */
                                  <div>
                                      Hello
                                      <SignInAndUp></SignInAndUp>
                                  </div>
                              }
                          />
                      </Routes>
                  </div>
              </Router>
          </div>
      </SuperTokensWrapper>
  );
}

export default App;
r
Right. So when the user is logged in, 
SignInAndUp
will redirect them to 
/
by default, which will display 
SignInAndUp
again, which will do a redirection again and so on
so either change the path where 
SignInAndUp
is rendered, or else change where it redirects to post login: https://supertokens.com/docs/thirdpartyemailpassword/common-customizations/redirecting-post-login
y
ah but if I want to redirect them to / but without the signup form?
r
Then you can change the 
/
logic to be something like this:
Copy code
ts
import Session from "supertokens-auth-react/recipe/session";

function Home() {
   let sessionContext = Session.useSessionContext();
   if (sessionContext.loading) { 
     return null; 
   }
  if (sessionContext.doesSessionExist) {
    // render home component..
  } else {
    return <SignInAndUp />
  }
}
And then your router becomes:
Copy code
ts
function App() {
  return (
      <SuperTokensWrapper>
          <div className="App">
              <Router>
                  <div className="fill">
                      <Routes>
                          {/* This shows the login UI on "/auth" route */}
                          {getSuperTokensRoutesForReactRouterDom(require("react-router-dom"))}

                          <Route
                              path="/"
                              element={
                                      <Home />
                              }
                          />
                      </Routes>
                  </div>
              </Router>
          </div>
      </SuperTokensWrapper>
  );
}
y
ah that's perfect! can I verify something? we need ThirdPartyEmailPasswordAuth to get session context? isn't it done with the supertokenswrapper?
r
oh yea.. true. You don't need to use 
ThirdPartyEmailPasswordAuth
then.
(i have modified the code above)
y
nice and clean! thanks so much @rp_st for helping out!!
r
happy to help
PreviousNext
Powered by