accessing the angular fullstack default application by authenticating via google oauth2

Currently, I have my angular fullstack application running on localhost:9000.

I am trying to implement a feature that allows users to log in by clicking the "Connect with Google+" button on the login page. However, I keep encountering an error 400 with the message "redirect_uri_mismatch."

To address this issue, I have visited the Google Developers Console and created a Project where I configured the following settings:

Client ID <Client ID>

Client Secret <Client Secret>

Redirect URIs http://localhost:9000/auth/google/oauth2callback

Javascript Origins http://localhost:9000

In my local.env.js file, I included the following:

GOOGLE_ID: <Client ID>

GOOGLE_SECRET: <Client Secret>

Despite these configurations, whenever I attempt to log in via the "Connect with Google+" button, I continue to receive the same error 400 with the redirect_uri_mismatch message indicating that the redirect URI in the request is different from what is expected at http://localhost:9000/auth/google/callback.

If anyone has any insights on what might be causing this issue or can provide guidance on properly setting up this functionality, I would greatly appreciate it.

Answer №1

After some troubleshooting, I managed to solve the issue myself.

I made a change to the Redirect URI within the Google Developers Console.

The updated Redirect URI is now:

Redirect URIs http://localhost:9000/auth/google/callback

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

Learning about the functions Promise.all and Array.map()

My current project involves retrieving data from multiple APIs and aggregating them into a final array that will be displayed in the UI using React. Let me explain the scenario. First, I retrieve the main data from the primary API: const response = await ...

Difficulty with Angular's Interpolation and incorporating elements

I've encountered an issue with String Interpolation while following an Angular course. In my server.component.ts file, I've implemented the same code as shown by the teacher in the course: import { Component } from "@angular/core"; @Component ( ...

What method can I use in pure Javascript to identify which day the week begins on, either Monday or Sunday, based on the

Can someone help me determine the start day of the week in local time using only Javascript? The start day could be Monday, Sunday, Saturday, or Friday. I came across this helpful resource on Stack Overflow: <firstDay day="mon" territories="001 AD AI ...

Propagating numerical values through iterative iterations

I am currently facing an issue with passing values as props to a component using the forEach method in JavaScript. In addition to passing the existing values from an array, I also want to send another value that needs to be incremented by 1 for each iterat ...

The battle between "this" in HTML and AngularJS ng-model

We have been working on updating an old ColdFusion application that utilized "this" with a formatting function: <td>$<input type="text" name="txtTaxProration" id="txtTaxProration" value="0.00" alt="Tax Proration" onblur="dollarBlur(this);">< ...

What is the best way to access a component's value from a different component in Vue script?

I have two Vue components in my PHP file: "application" and "vn" component. I am trying to fetch {{obj.vacancies_left}} from the "vn" component and use it in the "application" component. However, I keep getting an undefined variable error. I attempted to r ...

Exploring the Use of async: false in jQuery

Can you tell me if there is a distinction between these two settings: $.ajax({ type: "POST", traditional: true, url: '/adminTask/doAction', async: false, <<<<<<<<<<<<<< HERE data: p ...

Retrieving Remote Headers in Loopback.io Inbound HTTP Method

In my remote method, I have placed the application logic as shown below: module.exports = function(Entity) { HcpEntity.retrieveProfile = function(body, cb) { process.nextTick(function() { //TODO: Add Application Logic here } } } Also, he ...

Is there a method in Kalendae js that automatically triggers the closing of the calendar after a date has been selected?

Currently, I am using Kalendae from https://github.com/ChiperSoft/Kalendae and I have to say it is fantastic. The best part is that I don't have to worry about dependencies. By default, the calendar pops up when a text box is selected and updates the ...

Updating a React JS State using a Parameter

Is it feasible to develop a function that accepts a parameter (either a string of the state name or the actual state) and then assigns the state related to the parameter? SetState(x) { // Suppose x can be any state we have already defined (it sh ...

Navigational packages for React applications

As I make decisions for my React project, I am considering which routing library to choose. Are there any alternatives to "react-router," "ui-router," and "react-navigation" that you would recommend? ...

What are the common issues with Angular 2's ng-if directive?

I am completely new to working with Angular and have already gone through all the ng-if related questions without finding a solution that fits my issue. Here is my code: <tr *ngFor="#position of positions"> <td> ...

At what point is ng-if triggered?

I am currently in the process of developing functionality for buttons that open directives in modal windows. To keep things simple, I decided to use a modal container flagged with the versus directive: <div ng-if="vm.Modal.Modal1"> <directive-for ...

Creating dynamic columns in AngularJS using ng-repeat

I am currently facing a challenge with displaying a list of products using ng-repeat. The columns of these products change dynamically, but there will always be an id column and a name column present. How can I configure ng-repeat to display the values o ...

Solving an object in ui-router state using ui-sref

Dealing with a large JSON object in an Angular controller and wanting to pass it to the controller of a template that will be displayed in a ui-view. I am aware that parameters can be passed to states using ui-sref, but I do not want this object to be visi ...

Pass JavaScript variables to a PHP file with the help of AJAX

Hey there, I'm new to developing web-based applications and currently learning about AJAX. I've run into a problem while trying to make an AJAX request with user inputs as variables and fetching the same variables in a PHP file. Below is the code ...

Passing events value in Fullcalendar Plugin by utilizing a javascript function to format events in the Fullcalendar event format

Currently, I am utilizing the full calendar plugin to display data on a calendar from a workflow. The values needed for the events are obtained in a separate function and need to be passed as fullcalendar events. I am uncertain about how to retrieve these ...

What is the proper method for running a script using the Selenium JavascriptExecutor?

On my test.html page, I've included the following code snippet: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> </head> <body> ...

Issue with state not being updated upon clicking "Save" button

After setting multiple items in the TransferList component provided by Material-UI, I am encountering an issue when trying to update a state upon clicking "Save". The problem is that the state does not update immediately after clicking "Save"; it requires ...

Ways to Retrieve the Text From the Selected Index in Datalist Element

I need to extract the inner text of the option tag using pure JavaScript This is the HTML code I am working with: <input list="in" name="i_n" class="form-control" placeholder="Enter Item Name" required> <datalist id="in" onChange="rate(this)"&g ...