603466164219281420 #support-questions

Hi, is there an easy way to define execute callback functions in the frontend upon signin apart from those made for the analytics calls? As in a custom behaviour so that I could hide elements which should only be visible for logged out users.

06/28/2021, 5:41 PM

So you want to essentially check if a user is logged in, and if they are, you want to hide some elements?

nim4ze

06/28/2021, 5:44 PM

Yes, I have a ReactDOM.render which contains the router a NavBar and EmailPasswordAuth. Upon login I want to hide / remove the navbar from the DOM as I'd like to display a different navbar, which is contained in my App (encapsulated in the EmailPasswordAuth).

06/28/2021, 5:44 PM

Cool! So check this out: https://supertokens.io/docs/emailpassword/common-customizations/sessions/checking-session-front-end

06/28/2021, 5:46 PM

Also, are you wrapping your entire app with

EmailPasswordAuth

component?

06/28/2021, 5:47 PM

I have DM'd you as well - if you could please see that, it would be very helpful :))

nim4ze

06/29/2021, 2:46 PM

Hi, when we navigate to our app to the site which has the supertokens login form, it will automatically append

/auth?rid=emailpassword&redirectToPath=%2F

to the domain. As this is in the URL, when a user then refreshes the page a 404 page is shown. Is there a way to turn off the automatic appending of the parameters?

06/29/2021, 2:47 PM

A 404 should not be shown if a user refreshes the page on that URL

06/29/2021, 2:48 PM

can you maybe explain the user flow little more clearly?

06/29/2021, 4:43 PM

@User , just a recap of the solution to the 404 issue: You need to configure your backend webserver routing to server the

index.html

file regardless of which path the user visits via their browser. Hope this solves your issue :))

user

06/30/2021, 8:53 AM

How to override the React components generated using

SuperTokens

from

supertokens-auth-react

? In docs there exists one for

ThirdPartyEmailPassword

https://supertokens.io/docs/thirdpartyemailpassword/advanced-customizations/react-component-override/usage But the same

override

didn't work for

SuperTokens.init(...)

06/30/2021, 8:54 AM

Can you share your code please?

user

06/30/2021, 8:55 AM

SuperTokens.init({
  appInfo: {
    // learn more about this on https://supertokens.io/docs/thirdpartyemailpassword/appinfo
    appName: "S",
    apiDomain: END_POINT,
    websiteDomain: window.location.href,
    apiBasePath: "/api/auth",
  },
  recipeList: [
    ThirdPartyEmailPassword.init({
      signInAndUpFeature: {
        providers: [],
      },
      onHandleEvent: async (context) => {
        if (context.action === "SUCCESS") {
          store.dispatch(getProfilesFromDb);
        }
      },

      override: {
        components: {
          SignInHeader: (OriginalComponent) => (originalProps) => {  
            console.log("signinheader")
            return (
                <div>
                    <h1> text1</h1>
                    <img src="https://s.ai/logo_full.svg" />
                    <OriginalComponent {...originalProps} />
                </div>
            );
        },

        EmailPasswordSignIn: (OriginalComponent) => (originalProps) => {
          return (
              <div>
                   <h1>text2</h1>
                  <OriginalComponent {...originalProps} />
              </div>
          );
        },
     
      }
      }
    }),
    Session.init(),
  ],
});

user

06/30/2021, 8:58 AM

In simpler words, I want to add a logo and change the header text of this React component.

06/30/2021, 9:03 AM

let me check..

06/30/2021, 9:16 AM

So you might want to try this:

ThirdPartyEmailPassword.init({
  signInAndUpFeature: {
    style: {
      headerTitle: { display: "none" }
    },
    ...
  },
  override: {
    components: {
      ThirdPartyEmailPasswordHeader: (OriginalComponent) => (originalProps) => {
        return (
          <div>
            <h1>text1</h1>
            <img src="https://s.ai/logo_full.svg" />
            <OriginalComponent {...originalProps} />
          </div>
        );
      }
    }
  }
}

- You need to override

ThirdPartyEmailPasswordHeader

component (which will affect the sign in and sign up pages. - You need to hide the current title by using

headerTitle: { display: "none" }

as seen above.

user

06/30/2021, 9:18 AM

Thanks, Will try this and let u know

06/30/2021, 9:19 AM

And in your custom component, you can check if the current screen is sign up or not by using

originalProps.isSignUp

boolean

sahil-shubham

06/30/2021, 9:26 AM

Hi there! Does Supertokens has any kind of session id which can be used to differentiate between two logged out users? I wanted to store some data regarding what different users search for. In the case of signed in users, I can store the hash of the userId but this isn't possible for other users.

06/30/2021, 9:26 AM

we don't have anonymous sessions yet 😦

06/30/2021, 9:27 AM

But you can set some random ID for each user in their cookies - regardless of if they are logged in or not (when they first visit the site).

06/30/2021, 9:28 AM

If they are logged in, then you can continue to use supertokens' session to ID them. Else, you can use the random ID you had put in their cookies.

user

06/30/2021, 6:38 PM

I have tried the same code. But the `override`is not working. The

headerTitle: { display: "none" }

works well But in override, we tried changing the components like

SignInHeader

EmailPasswordSignIn

. But nothing worked

06/30/2021, 8:05 PM

@User which version of supertokens-auth-react are you using?

06/30/2021, 8:06 PM

Because I tried the code on the demo app we have, and it works. I copy / pasted the code from there into discord

sahil-shubham

07/01/2021, 4:05 AM

0.13.0

sahil-shubham

07/01/2021, 4:05 AM

Should we upgrade to another version?