2

I am making simple google Oauth sign in button using react, and node+express. react server - 3000 node - 5000

now, I have defined the routes for sign-in in server.js and in react index.js I am making a get request on that route

SERVER app.js

app.get('/auth/google',
passport.authenticate('google', { scope: ['profile'] }));

app.get('/auth/google/welcome', 
passport.authenticate('google', { failureRedirect: '/erro' }),
function(req, res) {
  // Successful authentication, redirect home.
 
  res.redirect("/welcome");
  // res.send("Hello");
  
});

REACT index.js

 const url = "http://localhost:5000/auth/google";

 const handleit = async () => {
 const data = await Axios.get(url,{
  mode:"cors"
 })
 .then(function (response) {
 console.log(response.data);
 });


 };




 return (
 <div>
 <h2>Hello</h2>
 <button onClick={handleit}>Sign in </button>
 </div>
 );

}

in my google developer console, I have defined the javascript origin URL and callback URL for both the ports. and whenever I click on the sign-in button it shows this error

Access to XMLHttpRequest at 'https://accounts.google.com/o/oauth2/v2/auth?response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fauth%2Fgoogle%2Fwelcome&scope=profile&client_id=782132931351-lb3im7qg19k9fh7ml711meld1nugur5j.apps.googleusercontent.com' (redirected from 'http://localhost:5000/auth/google') from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I have searched everywhere but not able to remove this error and get the google sign in prompt, please help

Hamada
  • 1,836
  • 3
  • 13
  • 27
anoniket
  • 271
  • 1
  • 2
  • 11
  • Using redirect on the server triggers CORS. Return the redirect URL to your front-end in some other way or capture it in React. – Parth Shah Jul 12 '20 at 11:41

0 Answers0