Google Auth, NestJS, NextJS

Limbaje de Programare JavaScript / Node
1

Salut,
Ma chinuit de vreo cateva ore sa fac sa mearga autentificarea pe frontend cu google.
Pe backend am NestJS si am facut cu Passport si strategia de google-auth care separat merge foarte bine, adica fac request la BACKEND_URL/auth/google si ma redirecteaza automat catre google unde ma autentific ai spoi imi da raspunsul pe BACKEND_URL/auth/google/redirect .
Cand incerc de pe frontendul care e facut in NextJS sa apelez BACKEND_URL/auth/google primesc eroarea:

Access to XMLHttpRequest at ‘Inloggen - Google Accounts’ (redirected from ‘http://localhost:4005/auth/google’) from origin ‘http://localhost:3000’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

Nu imi dau seama, dar gresesc ceva aici. Am incercat diverse variante si nu imi merge. In google console este configurat si url-ul de unde fac requesturi (localhost:3000)

2

it needs https:// (and perhaps use a real domain name, not localhost)… And/Or set the Access-Control-Allow-Origin response header on your dev site (localhost or not)… Pe aici pe undeva e soluția. Începe cu ultima parte…

3

In backend tre sa permiti optiunile de cors. Fie la nivel de request http, get, post etc sau pe toate.
Backend-ul si frontend-ul ruleaza pe port-uri diferite.

Optiunile sunt cele din raspunsul lui @Cornel

Poate am zis o tampenie, dat sper ca te ajuta.

4

Multumesc pentru raspunsuri. Tot nu merge, dar o sa dau mai multe detalii.

Test 1:
FE cu NextJS:
Pagina care triggeruieste Google Auth arata asa

import axios from "axios";

export default function test() {
  const onGoogleLogin = ()=> {
    console.log("===== onGogoleLogin")
    axios.get('http://localhost:4005/auth/google', {
      withCredentials: true,
      // headers: { 
      //   'Access-Control-Allow-Origin': '*',
      //   // 'Access-Control-Allow-Credentials': 'true'
      // }
    }).then(resp => console.log(resp.response))
    .catch(err => console.log(err) )
  }
  return (
    <>
      <button type="button" onClick={ onGoogleLogin }>Login with Google</button>
    </>
   
  )
}

Eroare returnata este cea din primul mesaj. Lucrul asta m-a facut sa ma gandesc ca vrea neaparat sa ii trimit headerul ala.

Testul 2:
Din next am trimis requestul cu headerul cerut, adica am decomentat linia cu headers acces-control-allow-origin. Am incercat si cu wildcard, dar si cu adresa frontendului acolo.
Primesc eroarea:

Access to XMLHttpRequest at 'http://localhost:4005/auth/google' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.

E clar ca backendul nu accepta headerul respectiv desi este setat sa accepte headerul respectiv

const app = await NestFactory.create(AppModule);
  const options = {
    origin: process.env.ALLOW_CORS.split(','),
    methods: 'GET,PUT,POST,DELETE,OPTIONS,HEAD',
    optionsSuccessStatus: 204,
    allowedHeaders: 'access-control-allow-headers, Access-Control-Allow-Headers, authorization, Authorization, content-type, Content-Type, Referer, User-Agent',
    credentials: true,
  };

  app.enableCors(options);

Evident ca am incercat si cu header wildcard si tot aceasi eroare . Inclusiv am comentat linia enableCors. Tot aceasi eroare.
Am cautat si pe google. Am ramas fara idei…

5

Ah, prea iubitul preflight.

Cand îți dă eroare cu preflight înseamnă că nu setezi headerele la raspunsul request-ului de OPTIONS. Verifica cu postman/curl ce face backend-ul. (Ai grija sa setezi origin la fiecare request - pe front-end îl pune browserul cand intervine cors)

Dar la tine problema e simpla, vezi ca contează și portul la cors, pune fiecare url cu portul specific.

Adică la origin setează un array cu fiecare URL si port in loc de env-ul ala. Nu folosi wildcard-uri, nu merg.

Local poți folosi și un proxy sau ceva plugin ca și moesif cors.

6

Am setat corect in NestJS corsul pentru ca am cu port configurat in env si acum folosind testul 2, (NextJS trimite cu header cu tot nu mai crapa de la serverul meu).
Nu inteleg inca ce are.
Later: Am pus in nestJS inca un header care nu era, dar nu rezolva problema.

7

Ce eroare da ? Poti sa pui un screenshot la consola ?

8

test:1 Access to XMLHttpRequest at ‘Inloggen - Google Accounts’ (redirected from ‘Inloggen - Google Accounts’) from origin ‘http://localhost:3000’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

9

Nu îți raspunde la preflight nestjs.

10

Cum il fac sa imi raspunda? Nici nu stiu dupa ce sa ma uit.

11

Faci un request din curl cu -x OPTIONS si setezi header origin-ul. Ar trebui sa raspunda cu ce ai setat in nestjs.

Cauta how to test preflight curl/postman.

12

Sigur ai cors pornit in backend?
app.enableCors() sau await NestFactory.create(AppModule, { cors: true });
Am mai intalnit eroarea asta,chiar daca nu are treaba cu cors , cand nu ai permisiunile in firebase date…Firebase → Console → Proiectul tau → Authentication → Sign-in Method → Authorized domains -aici pui localhost , si sus la sign-in providers pui email and password.

1 Like