App gets stuck on callback url

Help
1

Hi, I’m after some assistance regarding my callback url when using auth0.

I originally built and successfully implemented an Angular FE app in which i call the “/authorize” endpoint as per instructions when a user clicks login.

This approach as you most likely know, takes the user to a lock/universal login page where the user is authenticated and redirected to my callback url (which is a callback component, that does only one thing which is call my handleAuthentication method).

New project requirements , led me to create a custom login form (instead of the auth0 lock/widget/HLP) where the user would enter their username and password and then be authenticated.

I thought it would require just a few changes in my current implementation such as including a custom login form, which upon submission calls the this.auth0.redirect.loginWithCredentials.

Again what’s so frustrating is this also works fine, however the issue occurs when the user logs in and is redirected to the specified redirectUri (http://localhost:4200/callback) the session is maintained and , the logic i have in place shows the user is signed in, even the logic that stores the token is also working fine.

As with many auth0 examples there is a handleAuthentication method in place which calls the parseHash method and retrieves the userProfile etc.

However with the new changes i made which are just to reiterate: add custom form for username and password instead of a login button, and change webauth endpoint from /authorize, to redirect.loginWithCredentials

Now app no longer calls the handleAuthentication method which is called in my callback component like my previous approach. Instead after logging in the url just shows the following
http://localhost:4200/callback#access_token=&scope=openid%20profile%20email&expires_in=7200&token_type=Bearer&state=, the user shows they are logged in and everything works it’s just the callback url giving me issues.

I have removed the token and content for security, but i would like to know how i can get the app to correctly redirect without showing all these parameters and call the handleAuthentication which calls the parseHash method and gets the user profile and then navigates back to the homepage.

What stumps me is how is it logging in correctly, storing the token correctly, and maintaining the session but yet still showing the callback url with all its parameters and not calling the handleAuthentication method which to me is the last part of the process.

login method called when clicking sign in from form submission.

```login(user: User): User {
        const { username, password } = user;
        this.auth0.redirect.loginWithCredentials({
            realm: environment.connection,
            username,
            password,
            audience: environment.audience,
            scope: environment.scope,
        });
        return new User(username, password);
    }```

handle auth method which i cant seem to call but did get called with the universal login approach.

    ```handleAuth(): void {
        console.log('handleAuthCalled');
        this.auth0.parseHash((err, authResult) => {
            if (authResult && authResult.accessToken) {
                console.log('authResult', authResult);
                window.location.hash = '';
                this._getProfile(authResult);
            } else if (err) {
                console.error(`Error authenticating: ${err.error}`);
            }
            this.router.navigate(['/']);
        });
    }```

Overall sorry for the long detail, but in summary i need to not show all the url parameters ie: token etc in the url.

And i need the handleAuthentication to be called after calling the login function above.

Thank you in advance.

1 Like