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

"Comparing the use of subdocuments in a MongoDB user collection versus using a

Currently, I am working with meanjs and I have a requirement to store user data in a one-to-many relationship. Even though my scenario is similar to the articles example, articles will only be accessed through the user. I envision the route to look somethi ...

Combining JS Promise.all with onDOMContentLoaded to ensure all resources are

Is there a way to efficiently retrieve a json file for data while also waiting for the dom to load in order to populate a table simultaneously? The current method I am using is slow as it waits for the dom and then performs the get request. $(document).r ...

The API repository for searching podcasts in Itunes occasionally fails to return the "feedUrl" information

Currently, I am working on developing a podcast application for Android, and I am utilizing the Apple iTunes Search Podcast JSON API available at: Most podcasts function well with this API. However, some JSON responses do not include the "feedUrl" field, ...

Storing dates using Angular 2 and JSON for efficient data management

I've encountered a challenging issue with my Angular 2 application. I'm attempting to organize my API (MongoDB) in such a way that each new "post" added by the admin can be retrieved by date (not time) on the front end. Here's an example of ...

jQuery import children into output

When inserting a div every nth-child and later calling the children of the parent, the jQuery inserted elements do not appear in this new list. How can I retrieve the inserted elements as well? Apologies if this is confusing. If it's easier to under ...

Replace the default focus state using CSS or resetting it to a custom style

I'm looking for a solution similar to a CSS reset, but specifically for the :focus state. If such a thing doesn't exist yet, I'm interested in learning about the possible properties that can be reset or overridden in order to create a new :f ...

Setting up redux with Next.js: a step-by-step guide

After setting up redux in this manner, everything is functioning properly. The _app.js file has been reorganized as follows : import App from 'next/app'; import { Provider } from 'react-redux'; import withRedux from 'next-redux-wr ...

Images in CSS not copied to the output directory when using Webpack

Using Webpack to bundle various javascript and css files on a website includes bundling bootstrap.css and chosen.css as part of the bundles. To achieve this, there is a main.js file serving as an entry point for importing all necessary files. The process i ...

Converting JSON data into Java objects

{ "city" : "THAYNE", "loc" : [ -111.011354, 42.933026 ], "pop" : 505, "state" : "WY", "_id" : "83127" } I have been given some JSON syntax and I am looking to convert it into a Java object. Initially, I crea ...

Determine the total number of nested objects within a JSON structure using Javascript

Consider the JSON structure below: { "id": "foo", "list": [ { "id": "A", "list": [ { "id": "B", "list": [ { "id": "C", "list": [ { ...

The PUT Method encounters errors when the model string contains a value that interacts with the web API

Here is a webapi method that I am working with: // PUT api/Competitions/5 public HttpResponseMessage PutCompetitor(int id, CompetitionViewModel competitorviewmodel) { ... } The structure of the CompetitionViewModel is as follows: public class Compe ...

What is the best way to toggle the enablement of a textbox with jQuery?

Welcome all! Initially, all controls are disabled. Upon clicking the Add or New button, I want to enable textboxes and the Save button while keeping the Edit and Delete buttons disabled. Once the Save button is clicked, I wish to disable all textboxes and ...

Error occurred while trying to parse JSON due to an abrupt ending

While attempting to reinstall one of my old vue projects on my new computer (running Windows 10) using npm, I encountered the following error: npm ERR! Unexpected end of JSON input while parsing near '...n":"0.8.1","devDepend' ...

Making an AJAX request in Javascript to retrieve multiple values using the HTTP method 'GET' from a URL

xmlhttp.open("POST","BAConsultRecordsAJAX.php?q="+str,true); Could this be achieved? xmlhttp.open("GET","BAConsultRecordsAJAX.php?q="+str+"j="+str2,true); I need to have values stored in both q and j fields. ...

Accessing content from a text file and showcasing a designated line

Apologies if my wording was unclear... In this scenario, we will refer to the text file as example.txt. The value in question will be labeled as "Apple" My goal is to retrieve example.txt, search for Apple within it, and display the entire line where thi ...

the issue with file_get_contents not effectively sending every parameter

I have recently created my own API to communicate between two servers. One server is requesting data using file_get_contents and passing GET Parameters, while the other server responds with JSON. Everything was working smoothly until I made a request with ...

Is there a way to determine if a button was clicked using twig?

I need assistance with implementing a button in my twig file within a table that will remove an element from an array. Ideally, I would like to remove the element based on its index. From the research I have conducted, it seems that data manipulation shou ...

Using TypeScript, we can assign a JSON object to an extended class by leveraging the

Task was to include an additional property. I modified a current class by adding a new property, but when I assign a JSON object from the database, the newly added property disappears. Is there a way to correctly assign a JSON object to a TypeScript class ...

Issues with Unity JSON API

I am currently facing a challenge as I attempt to save an n x m field array as JSON in a text file within Unity. Due to the limitation of Unity not supporting array types for top-level JSON deserialization, I have created a custom class structure like this ...

Adding a Subitem into Created JSON in Groovy/Grails

In my Grails 2.1 project, I have created a RestFul API to render JSON data. The Domain class is mapped to a SqlServer table and has fields like: String firstName String lastName String officialAddress1 String officalAddress2 String preferredAddres ...