The authentication callback function fails to execute within Auth0 Lock

I'm having an issue with logging into my application using Auth0. I have integrated Auth0 Lock version 10.3.0 through a CDN link in my project and am utilizing it as shown below:

let options = {
    disableSignupAction: true,
    rememberLastLogin: false,
    gravatar: false
}

// Display the login form
this.auth0Lock.show(options, (err, profile, token) => {
    if (err) {
        this.$log.error('Login error:', err)
       return reject(err)
    }
});

However, when attempting to login with Google, the callback function does not trigger and I cannot retrieve the token.

javascriptangularjstokenjwtauth0

Answer №1

It appears that you are referencing version 10.3.0, however, the code snippet you have included is tailored for an earlier version of Lock. One key point to note in your case:

The show method no longer accepts arguments. Instead, you should pass options to the constructor and listen for an authenticated event rather than using a callback function.

(emphasis added)

To learn more about transitioning from a previous version, please refer to the Lock 9 to Lock 10 Migration Guide.

In addition, your current callback only handles error scenarios. Therefore, it is necessary to incorporate logic for successful occurrences after updating to the new structure introduced in Lock 10.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What sets apart toBeInTheDocument from getBy* in @testing-library/react?

Can you distinguish between these two methods in react-testing-library? expect(screen.queryByText('<something>')).toBeInTheDocument(); And screen.getByText('<something>'); (The specific getBy* and queryBy* operation are no ...

javascriptreactjstestingjestjsreact-testing-library

What triggers the invocation of the onerror handler in XMLHttpRequest?

I am facing a bit of confusion when trying to understand the functionality of XMLHttpRequest's handlers. After reading the specification regarding the onerror handler, it mentions: error [Dispatched ... ] When the request has failed. load [Dispa ...

javascriptajaxxmlhttprequest

Steps for packaging an AngularJS and WebAPI 2 web application as a Cordova bundle

I am currently working on a portal using VS.Net 2013, Asp.Net WebAPI-2, and AngularJS 1.4. I want to convert this portal into a Cordova package in order to improve the application start time. While my portal is responsive and fits well on mobile devices, s ...

angularjscordovaasp.net-web-apivisual-studio-cordova

Tips for showcasing the contents of a file on a website

Greetings! I am a newcomer to the world of web development and I am seeking a method to showcase file content on a webpage. Presently, I have succeeded in loading text file content and displaying it in a large text box. However, I am now interested in di ...

javascripthtmlangularweb

Utilizing AJAX to showcase an HTML popup

I am currently working on a project to create an HTML page that will display another HTML file in an alert when a button is pressed. However, I am facing an issue where the content is not being displayed as expected. <html> <head> ...

javascriptajax

Firefox's keyup event

Is it possible to detect a keypress using the jQuery keyup function, as I am facing an issue where it works in Chrome, Edge, IE, and Opera but not in Firefox. $(".textfield").contents().keyup(function(evnt) { document.getElementById("btn_save").style. ...

javascriptjqueryhtmliframejquery-events

reduce the size of the image as the browser width decreases

Struggling with a webpage layout that features an image on the left and content area on the right, both with fixed widths. When reducing browser width, the image should not shrink but be cropped from the left side instead. Any solutions for this issue? ...

javascripthtmlcss

Avoid re-rendering the page in Nuxt when adjusting dynamic parameters

My page has two dynamic parameters that trigger the fetch method to run again when the URL params are changed. I want to avoid this behavior. Fetch Method: async fetch() { await this.getFlightResult(); } Get Result Method: async getResult() { th ...

javascriptvue.jsnuxt.jsurl-parameters

Triggering multiple functions by clicking on the Icon

I'm trying to execute two different functions when the user clicks on the Icon, but I keep getting an error that says: Expected onClick listener to be a function, instead got a value of object type. Can someone please help me figure out what I am doin ...

javascriptreactjs

Nodejs application encountering a problem with the findUser method in Active Directory

I have encountered an issue while using the activedirectory npm package with Nodejs v16.18.1. The code snippet below is used for authentication and finding user details: Could someone please assist with this? async authUserActiveDirectory(usernameAD: stri ...

javascriptnode.jsactive-directory

Filling HTML5 Datepicker Using Information from a Model

Currently, I am in the process of developing a basic scheduling application for a project. To simplify the task of selecting start and end times/dates for our events, we have included a simple DateTime picker in the source code: <input type="datetime-l ...

javascriptasp.net-mvchtmlrazor

My PHP errors and success messages are not being displayed properly after an AJAX success

After making an AJAX call to submit a form, I would like to display either the PHP success message or error message upon completion. This is my current AJAX success function: success: function (data) { resultSuccess = $(data).find("#success") ...

javascriptphpjqueryajax

Lightbox.options does not exist as a function within the lightbox plugin

I recently incorporated a lightbox plugin into my website, which can be found at the following link: For displaying items on the page, I am using markup similar to this example: <a href="images/image-2.jpg" data-lightbox="my-image">Image #2</a&g ...

javascriptjquerylightboxlightbox2

Exploring the different pages in React js

I am currently working on implementing a button in React Js that, when clicked, should navigate to another screen. However, I keep encountering an error: TypeError: Cannot read property 'push' of undefined. I have tried various solutions but noth ...

javascriptreactjsreact-router-dom

What is the best way to modify the text color within a Navbar, especially when the Navbar is displayed within a separate component?

First question on StackOverflow. I have a Next App and the Navbar is being imported in the _app.js file. import Navbar from "../Components/Navbar"; function MyApp({ Component, pageProps }) { return ( <> <Navbar /> ...

javascripthtmlcssreactjsnext.js

Preview and crop your image before uploading

Currently, I am working on developing a form that will enable administrators to upload an image. The aim is to allow them to preview the image before uploading it, displaying it at a specific size and providing the option to click on the image to open an i ...

javascriptjquery

Rearrange lists by dragging and dropping them according to specific criteria

In my AngularJS project, I am utilizing the angular-drag-and-drop-lists library from here to create two lists with the following functionalities: Dragging items from list A to list B Dragging items from list B to list A Reordering items in list A Reorder ...

javascriptjqueryangularjsdrag-and-drop

Listening for Events from Child Components in Vue.js

I am struggling to figure out how to send an event from a child component to its parent in order to change the view. Although I have been able to create and emit the event, my template does not seem to be properly registering it. I am working with Single ...

javascriptvue.jsvuejs2frontend

Leveraging a single Axios request across various components

My current setup involves making a simple Axios call in this way: .get('https://myAPI.com/') .then(response => { this.info = response.data }) Subsequently, I utilize a v-for array loop on my components to display the retrieved data. ...

javascriptvue.jsaxios

AngularJS directive called 'dataSharing' operates

Something strange is happening here. Not functioning properly scope: { 'dataSource': '='} Functioning well scope: { 'mySource': '='} Working perfectly scope: { 'data': '='} Could someone ex ...

angularjs