Why auth0's parseHash return undefined?

Question

I was new to auth0, when I tried to experiment with auth0's parseHash. It surprised me that somehow this function returns null. I tried to take a peep inside the source code, it seems this function attempts to return something eventually.

Here's the part of code that confused me:

import React from 'react';
import { Link } from '@reach/router';
import './Callback.sass';

export const Callback = ({ auth, navigate }) => {
  let result = auth.parseHash((err, authResult) => {
    if (err) {
      return (
        <div className="error">
          <h1>{err.error}</h1>
          <p>{err.errorDescription}</p>
          <Link to="/">Home</Link>
        </div>
      );
    } else {
      console.log({ authResult });
      return 'profile';
      // localStorage.setItem('authResult', JSON.stringify(authResult));
      // navigate('/profile');
    }
  });
  console.log({ result });
  if (result) return result;
  return <React.Fragment />;
};

Here's the result:

Which I think is really confusing. The console logs 'authResult' part, yet the result is undefined. (I even tested with async await, still can't get what I expect).

I am currently just wrap the result to work around this.

Is this a bug? Or am I using this method not in a correct way?

Benjamin S. · Accepted Answer · 2019-05-24T15:44:44.540

I am also new to auth0 and experienced the same error today.

Solved it by wrapping parseHash in a Promise:

/* ... */

function handleAuthentication() {
  // wrap parseHash in a Promise
  return new Promise((resolve, reject) => {
    auth0.parseHash((err, authResult) => {
      if (authResult && authResult.accessToken && authResult.idToken) {
        resolve(authResult)
      } else if (err) {
        throw new Error(`Error: ${err.error}. Check the console for further details.`);
      } else {
        throw new Error(`Unknown error`);
      }
    })
  })
}

// wait for the Promise to resolve and log the result
handleAuthentication()
  .then(function(result) {
    console.log(result);
  });

The problem in your code is, that you expect parseHash to return the result directly, but it does not (in line 22). Instead it calls the callback function, that you have registered correctly and therefore you get the expected result inside the callback function, but not outside of it.

score 1 · Answer 2 · answered May 24 '19 at 16:43

1

Your console.log({ result });

running before the

let result = auth.parseHash((err, authResult) => {

So wrap it in Promise can help.

answered May 24 '19 at 16:43

Mandeep Gill

4,577
1
28
34

score 0 · Answer 3 · answered Dec 07 '19 at 12:35

There's nothing wrong with the code... With current example you should, in fact, always get "nothing" from consoling auth.parseHash$() that, in fact, is a callback that returns an Observable<any>.

Its purpouse is to parse the url hash and extract the Auth response, returning some custom parameters you pass in (the hash segment, precisely).

So, if you're not expecting to have returned some hash paramethers you ar passing in on requesting authorization, auth.parseHash$() will return nothing - link here

Why auth0's parseHash return undefined?

3 Answers3