Hi. I have created a custom rule with the goal of returning user.username. When calling the rule in a component I receive the username correctly. When calling that component in another component however, an object is returned. Can someone please help me figure out what is going wrong?
log2 in this image however returns this . Any help would be appreciated. Thanks.
It seems like you are trying to Log a JSX object which is not the user name.
AFAIK, the syntax <GetUser/> will be converted into a JavaScript object which will be helpful in rendering (not an expert in React, so apologies if I’m wrong)
What if you use the useAuth0() hook there as well instead of relying on your React Component to return the username?
I tried that initially but I was getting an error for calling a react hook in a class component. I can display the username fine in a header after passing it, but my issue is that I need the username to be a string so I can use socket.emit.
Ah, Gotcha!
I did some research and found that using a higher order component will help with this. See an example here: javascript - How can I use React hooks in React classic `class` component? - Stack Overflow
Basically, you have to create a Higher-order component and pass the values to your component as props.
With Auth0 React SDK, this is much easier. It provides a built in withAuth0 higher order component that you can wrap your Class component (@auth0/auth0-react).
For example,
import React, { Component } from "react";
import { withAuth0 } from "@auth0/auth0-react";
class Example extends Component {
handleSubmit(event) {
// `this.props.auth0` has all the same properties as the `useAuth0` hook
const { user } = this.props.auth0;
console.log('username', user.name);
}
// other code
}
export default withAuth0(Example);
Hope this helps!
It’s working! Thanks for the help.
No worries! We’re here for you!
This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.