0

I have a web application using Angular+Node+Express+Mongo and I have implemented an OAuth using passport.js for users to sign in to my app. At the moment I can type send a GET request and passport will handle the authentication and the google "sign in with google" will show up.

That works but I'm still having a hard time understanding how can I integrate this authentication to the angular app (the frontend). This is what I have so far:

// In the server passport is taking care of the authentication

passport.use(new GoogleStrategy({
    clientID: config.googleClientID,
    clientSecret: config.googleClientSecret,
    callbackURL: '/api/authentication/google/redirect'}, function someCallback(){})

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

I tried in my frontend to send a get request like this:

loginWithGoogle() {
    this.http.get('http://localhost:3000/api/authentication/google').subscribe(data => alert('WORKED')

But i got a cross origin error, probably because of the redirect URL.

After some reading, I found this link Google sign in tutorial and it shows how to integrate a sign-in in the frontend.

But at this point I'm lost, what is the difference between what I did in the server to this tutorial? How can i access my http://localhost:3000/api/authentication/google without a cross origin error? Am I even on the right way?

Edit: This is the cross origin error

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

Two Horses
  • 1,401
  • 3
  • 14
  • 35
  • Could this be of help: https://stackoverflow.com/questions/43150051/how-to-enable-cors-nodejs-with-express – Isolated May 11 '20 at 17:33
  • I already have `app.use(cors())`, still getting this error – Two Horses May 11 '20 at 17:37
  • Can you update your original answer with the exact error you receive (copy/paste your console output), does the error come from the localhost or google? Could you be a little more specific about where the error is coming from? – Isolated May 11 '20 at 17:38
  • the client secret is in the server, the passport js code never reaches the frontend, sorry for the bad examples – Two Horses May 11 '20 at 17:44
  • @TwoHorses he makes a valid point regardless of if it's on the server, you could use the front-end to redirect to google using the authorization code grant, reducing the need for the additional call to your back-end and also pushing *some* responsibility onto Google to ensure secure authentication, if that doesn't work then please update your question with the details from my comment above. – Isolated May 11 '20 at 17:46
  • @Isolated I posted the error. what I don't understand is this: I already have a node js server that sends me to "sign in with google" page and I get the google account details with which then I can push to my MongoDB. my problem is that right now I need to write in the URL "localhost:3000/api/authentication/google", but I don't want to do that, I want to integrate this to the frontend – Two Horses May 11 '20 at 18:42
  • Why are you making a request to the endpoint? You can use `res.redirect` instead, redirecting the user from your server (you could do this at front-end), to Google, then back to the `redirect_uri` specified (your server). You're implementing the authorization_code flow incorrectly, but not by much. https://developer.okta.com/blog/2018/04/10/oauth-authorization-code-grant-type – Isolated May 11 '20 at 18:58

0 Answers0