Directus Seamless SSO Google with react

Help
1

Update 2025-08-06: I tried with fresh directus and using react code from brother @ahmad_quvor using real domain (not at localhost), IT’S WORKING! Thanks alot, bro!

I tried to implement directus seamless sso google as this docs: https://directus.io/docs/guides/auth/sso/seamless but still not working. After choose google account, continue, it always failed. User not created yet at directus side. Already read this too: Problem with google auth frontend with Directus - #2 by ahmad_quvor but still no luck yet.

OMG, sorry forgot to share the errors. I’ll recall again:

  1. After click “Google” button, it redirected to https://directus.domain.com/auth/login/google?redirect=https://client.domain.com it’s 404 – SOLUTION: must set AUTH_GOOGLE_DRIVER=openid (i was tried oauth2)
  2. After chose 1 google account, and continue in permission page, it redirected to https://client.domain.com, in console I have GOOGLE Auth Code something like this 4/0AVMBsJj2UZl5–redacted–ZBAOGvYA
  3. I thought, until no 2 the process are correct, right? But how to get access_token from directus? What I read, i thought it was Google Auth Code in payload to /auth/refresh, but it didn’t work, INVALID Credentials.

My setup:

  1. Directus 11.10.0: on remote server https://directus.domain.com
  2. Client/FrontEnd: for testing on localhost (http://localhost:5173 or http://localhost:3000) and on cloud https://client.domain.com (already works for signin and signup directly through directus)

Please help me…

My .env:


PUBLIC_URL=https://client.server.com
CONTENT_SECURITY_POLICY_DIRECTIVES__FRAME_SRC=https://www.youtube-nocookie.com,https://player.vimeo.com
CONTENT_SECURITY_POLICY_DIRECTIVES__SCRIPT_SRC=array:'self', player.vimeo.com 'unsafe-eval', www.youtube.com 'unsafe-eval', www.youtube.com/iframe_api 'unsafe-eval'
CONTENT_SECURITY_POLICY_DIRECTIVES__IMG_SRC=array:'self' data:, i.ytimg.com 'unsafe-eval'
CONTENT_SECURITY_POLICY_DIRECTIVES__MEDIA_SRC=array:'self', cdn.plyr.io
# For all domains
CONTENT_SECURITY_POLICY_DIRECTIVES__MEDIA_SRC=array:'self', *
# OR for specific domains
CONTENT_SECURITY_POLICY_DIRECTIVES__MEDIA_SRC=array:'self', specific.domain.com, example.com
#GRAPHQL_QUERY_TOKEN_LIMIT=5000


# OAuth Configuration
AUTH_PROVIDERS=google
AUTH_GOOGLE_DRIVER=openid
AUTH_GOOGLE_CLIENT_ID=Client_ID
AUTH_GOOGLE_CLIENT_SECRET=Client_Secret
AUTH_GOOGLE_ISSUER_URL=https://accounts.google.com 
AUTH_GOOGLE_IDENTIFIER_KEY=email
AUTH_GOOGLE_ICON=google
AUTH_GOOGLE_LABEL=Google
AUTH_GOOGLE_ALLOW_PUBLIC_REGISTRATION=true 
AUTH_GOOGLE_DEFAULT_ROLE_ID=9d0cb9f4-9cbd-4308-9320-786e35ffedbb
AUTH_GOOGLE_REDIRECT_ALLOW_LIST=https://client.server.com
AUTH_GOOGLE_REDIRECT_URIS=http://localhost:5173/auth/google/callback,https://client.server.com/auth/login/google/callback
AUTH_GOOGLE_MODE=session

# Session Configuration (FIXED)
SESSION_COOKIE_DOMAIN=""
SESSION_COOKIE_SECURE=true
SESSION_COOKIE_SAME_SITE=None

REFRESH_TOKEN_COOKIE_DOMAIN=directus.server.com 
#Replace XXXX with the domain of your Directus instance. For example "directus.myserver.com"
REFRESH_TOKEN_COOKIE_SECURE=true
REFRESH_TOKEN_COOKIE_SAME_SITE=None

# This is to be use in development ⬇️⬇️⬇️
# AUTH_GOOGLE_MODE: "cookie"
# REFRESH_TOKEN_COOKIE_SECURE: "false"
# REFRESH_TOKEN_COOKIE_SAME_SITE: "lax"

# CORS Configuration
CORS_ENABLED=true
CORS_ORIGIN=https://client.server.com,http://localhost:5173,http://localhost:4173,https://directus.server.com
CORS_METHODS=GET,POST,PATCH,DELETE,OPTIONS
CORS_ALLOWED_HEADERS=Content-Type,Authorization,Accept
CORS_EXPOSED_HEADERS=Content-Range
CORS_CREDENTIALS=true
CORS_MAX_AGE=18000


WEBSOCKETS_ENABLED=true
MARKETPLACE_TRUST=all

What is the problem? Share the error you are getting

 –

1. Successfull pick a google account and accept request permission, but new user not created in directus side (but with your code, it's solved) 2. With your code, still can't /auth/refresh (400, bad request)

 –

1 Answer

1
2

Hi, this might help GitHub - khanahmad4527/directus-react-google-sso

Thanks for your fast response. I tried many times with your repo. Including creating new project again in Google Cloud, creating new fresh directus. But still no luck: useDirectusAuth.ts:10 POST https://buatpoc-dir.q4ml5v.easypanel.host/auth/refresh 400 (Bad Request) Login.tsx:13 Failed to refresh session: {errors: Array(1), response: Response} Update: There is a progress: Google account registered to directus! But in frontend, still auth failed.

 –

Hello, does my solution works locally for you?

 –

Please try to use simple domains for example admin.xyz.com for the Directus xyz.com for the frontend

 –

Thanks again, Sir. I still learn what my mistakes were. My error still here now: useDirectusAuth.ts:10 POST https://directus.domain.com/auth/refresh 400 (Bad Request) and i checked in session or local storage or cookies, there is no session or token saved. But i tried login with new google account, and recheck, there is new "directus_session" in cookies. And in web there a message "You are not logged in".

 –

You got it wrong. What I'm trying to say is: instead of using a complex domain like https://buatpoc-dir.q4ml5v.easypanel.host, try mapping it to a simpler domain and use that instead. @callmethanut had the same issue, and I suggested using a simple domain, which worked for them.

 –