Get twitter handle from from SPA

[lukesamkharadze]

I’m using auth0-react package and use useAuth0 hook

I want to be able to get user handle but user object doesnt contain that, is there any way to get twitter handle?

const { isLoading, error, user, loginWithPopup } = useAuth0();

console.log(user)

[tyf]

Hey @lukesamkharadze !

You should be able to get the Twitter handle in the user object by adding the screen_name to the ID token via a rule. The following should work:

function (user, context, callback) {

   // context.accessToken.twitter_handle = user.screen_name;
  	context.idToken.twitter_handle = user.screen_name;
  
  	return callback(null, user, context);

}

Hope this helps!

[lukesamkharadze]

Did you mean editing fetch user profile script found in custom social integration?

I’m using default twitter social integration, is there any way to get default twitter script and modify it?

I don’t want to write everything from scratch

[tyf]

Hey @lukesamkharadze!

@lukesamkharadze

Did you mean editing fetch user profile script found in custom social integration?

No, the code I shared should be added as a rule. This will add the twitter handle (user.screen_name) to the idToken which is then available in useAuth0(). For example, from Profile.js of the auth0-react sample:

export const ProfileComponent = () => {
  const { user } = useAuth0();

  return (
    <Container className="mb-5">
      <Row className="align-items-center profile-header mb-5 text-center text-md-left">
        <Col md={2}>
          <img
            src={user.picture}
            alt="Profile"
            className="rounded-circle img-fluid profile-picture mb-3 mb-md-0"
          />
        </Col>
        <Col md>
          <h2>{user.twitter_name}</h2>
          <p className="lead text-muted">{user.email}</p>
        </Col>
      </Row>
      <Row>
        <Highlight>{JSON.stringify(user, null, 2)}</Highlight>
      </Row>
    </Container>
  );
};

Here’s the exact rule I’m using:

function (user, context, callback) {

    context.accessToken.twitter_name = user.screen_name;
  	context.idToken.twitter_name = user.screen_name;
  
  	return callback(null, user, context);

}

And the rendered profile view in the React sample app:

Hope this helps!