AngularJS OAuth authentication Pop-up: Waiting for JSON response

I am looking to initiate an oauth request in a new window for my project.

Here is how I can open the new window:

var authWindow = $window.open("/auth/google/signin", "");

After the callback, my server will respond with JSON data:

 app.get('/auth/google/signin',
    passport.authenticate('google', { scope: 'https://www.googleapis.com/auth/plus.login'}),
    function(req, res, next) {
      // The request will be redirected to Google for authentication, so this
      // function will not be called.
    }
  );

app.get('/auth/google/callback',
    function(req, res, next) {
      passport.authenticate('google', function(err, user, info) {
        console.log('google authenticate callback');

        // Handle the response, then send token and user...

        res.json({
          token:token,
          user: user
        });

      })(req, res, next);
    }
  );

I need to know how to wait for the redirect to /auth/google/callback and receive the JSON response from the server.

What would be the best approach to handle this waiting period and managing the JSON data? Should I use a callback or postMessage()?

Answer №1

Absolutely, it is possible.
I have a solution using JS and Node.js as the backend technology.
The key skill utilized here is window.postMessage.
The general flow of the process is as follows:
1. The client requests the signup page from the server, and the server responds.
2. The signup page initiates the OAuth process by opening a new window that redirects to the specified OAuth page on your server.
3. The OAuth page performs several operations:

Your unique signup page HTML structure and JavaScript logic goes here...

This is how my OAuth page looks:

Your personalized OAuth page HTML structure and inline JavaScript can be found here...

Lastly, here's a glimpse of my server-side messy code :P

The server-side routing logic and functionalities used to handle GitHub OAuth callbacks are detailed here...

If you open the console in the signup page, you'll witness the real-time results.
Feel free to reach out if you have any questions or need clarification :)
Dedicated a week to perfecting this solution, hoping it proves beneficial to you.

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

Downloading files from a WebAPI using AngularJS

Searching for a way to download a file from the server using Web API and AngularJS? Below is an example of code used in an API controller. When accessing the API through a browser, the file can be successfully downloaded. However, implementing this functio ...

Does it follow standard practice for Array.filter to have the capability to also perform mapping on an array of objects?

While experimenting with Array.filter, I made an interesting discovery. By forgetting to include an equality check, my array was unexpectedly mapped instead of filtered. Here is the code snippet that led to this result: const x = [{ name: 'user' ...

Using Gson to deserialize JSON data into a Java class structure when the property names are unpredictable

Here is the JSON I am working with: { "details": { "interest": { "label": "example1", "value": "19,9", "symbol": "%" }, "monthly_invoice": { "label": "example2", "valu ...

Take a flat array and transform it into a two-dimensional array where each row contains associative elements

I am working with an array structure similar to this: [ 123456 => 'John Doe' 654321 => 'Doe John' ] My goal is to transform the numeric keys (e.g. 123456 and 654321) into sequential indexes (0, 1, 2, 3,...) and store them ...

Stop the page from scrolling when a modal is displayed in React

I've encountered an issue with my custom modal component where the background stops scrolling when the modal is open. Initially, I attempted to solve this by using the following code: componentDidMount() { document.body.style.overflow = 'hi ...

The system encountered an error due to the absence of a defined Google or a MissingKeyMapError from the

Currently, I am developing a component that includes ng-map functionality by following the guidance in this tutorial. <div class="content-pane" map-lazy-load="https://maps.google.com/maps/api/js" map-lazy-load-params="{{$ctrl.googleMapsUrl}}"> & ...

Determine the number of items in an array with JavaScript in Node

Looking to create a new variable that counts the names in an array and assigns them accordingly? I'm currently stuck on this task. The array contains names: names = [Jan, Jan, Jana] Counting the names is simple, but I'm facing difficulty in org ...

Rotating an object around another object in a 3D matrix axis using Three.js

I currently have the ability to rotate one axis. Here is the code that's working now: https://codepen.io/itzkinnu/full/erwKzY Is there a way to rotate an object on a random axis instead of just one fixed axis? Maybe something similar to this exam ...

Retrieve a dynamic HTML object ID using jQuery within Angular

In my Angular application, I have implemented three accordions on a single page. Each accordion loads a component view containing a dynamically generated table. As a result, there are three tables displayed on the page - one for each accordion section. Abo ...

What is the best way to assign a return value to a variable in JavaScript?

var robotDeparture = "The robot has set off to buy milk!" var farewellRobot = return robotDeparture; I'm attempting to show the content of the robotLeaves variable using a return statement. Furthermore, I intend to assign this return statement to a v ...

Splitting JSON data into groups using Python 3

Looking to divide the actual value into separate dynamic groups represented as an array of objects. c = { 'Date#1': '07/03/2018', 'Item#1': '789807', 'Description#1': 'Wooden Block ...

Reactivity in Vue on dynamically generated HTML elements

Experimenting with Vue 2, I attempted to generate DOM elements in the mounted hook as shown below: <div id="app"> <div id="container"> <label for="static_name">Existing field</label> <input ...

Implementing Passport authentication for Steam, transitioning from Express to NestJS

I have embarked on the task of transitioning an express project to nestjs. How can I achieve the same functionality in Nestjs as shown in the working code snippet from Express below? (The code simply redirects to the Steam sign-in page) /* eslint-disable s ...

The order of console outputs can be inconsistent and may not always align with the order in which they are called

Hello there! I'm diving into the world of JavaScript and have a query to share on Stackoverflow. If something seems missing in my question, please do point it out for me. Question 1: Can someone shed light on why the output sequence in the console s ...

"Encountering a problem with a missing object in jQuery when referencing

I'm encountering an issue with jQuery's $(this) object that's causing me to lose track of the this element in my code: $('.star').click(function (){ var id = $(this).parent().attr('id').split('rating')[ ...

What steps should I follow to enable a tooltip in this specific situation using qtip?

In my database, I have tables for venues, venue types, and map icons with the following relationships: A venue belongs to a venue type A venue type belongs to a map icon Each venue result is shown on the index page as a partial. Each partial ...

Tips for inserting user input into an array and showcasing it

const [inputValue, setInputValue] = useState(""); return ( <input onChange={(event) => setInputValue(event.target.value)} /> <p>{inputValue}</p> ); I'm facing a problem where I need to take input from a user and store it in ...

Label Overlapping Issue in React Select

Utilizing react-select version ^5.1.0, I am encountering an issue where the word "select" overlaps with the options when scrolling. An image has been attached for better clarification. How can I eliminate the occurrence of the select word overlapping my op ...

Watching for changes to an element's visibility within the viewport and automatically scrolling it

I'm having trouble making the input scroll to .here when its value matches "1". Even though I tried using a button with a handle-click function and it worked. Please lend me a hand with this issue. <template> <button @click="scrollToV ...

Looking to incorporate ipcRenderer from Electron into your Angular project? Having trouble accessing variables passed from the preload script?

I am struggling with incorporating ipcRenderer into the 'frontend' code of my electron app. Although I found examples in the documentation that use require, this method is not accessible on the frontend side where I am utilizing Angular. In the ...