sensitive-blue•3d ago
Does someone have a working example of using callback based oauth? (Google Auth without popup)
I'm lowkey confused as to how would the popup response send data to my backend and how do I validate it?
2 Replies
Hi @Sabudana. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Refine provides a working example of Google OAuth authentication that uses a redirect/callback flow (not a popup) in the auth-google-login example. This approach is suitable if you want to avoid popups and handle authentication via a full-page redirect, which is often easier to integrate with backend validation.
How the Callback-Based OAuth Flow Works in Refine
1. User clicks "Sign in with Google"
The app redirects the user to the Google OAuth consent screen. 2. Google redirects back to your app
After the user authenticates, Google redirects back to your specified callback URL with an authorization code. 3. Backend exchanges code for tokens
Your backend receives the code and exchanges it for access and ID tokens directly with Google. This is where you validate the user's identity securely. 4. Session is established
The backend can then create a session (e.g., via cookies or JWT) and the user is authenticated in your app. Example in Refine You can try the example locally with: Or view the source code.
Yes, Refine has a working example of callback-based Google OAuth (no popup). The backend should handle the code exchange and validation. For more details and code, see the Google Auth example. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
The app redirects the user to the Google OAuth consent screen. 2. Google redirects back to your app
After the user authenticates, Google redirects back to your specified callback URL with an authorization code. 3. Backend exchanges code for tokens
Your backend receives the code and exchanges it for access and ID tokens directly with Google. This is where you validate the user's identity securely. 4. Session is established
The backend can then create a session (e.g., via cookies or JWT) and the user is authenticated in your app. Example in Refine You can try the example locally with: Or view the source code.
Note: When developing your own OAuth application, make sure to add both your deployed and local development URLs to the list of allowed origins in your Google OAuth app settings. Otherwise, the redirect/callback will fail Google Auth Example.Backend Validation The knowledge sources do not provide a detailed backend implementation, but the standard approach is: - The frontend receives the authorization code from Google. - The code is sent to your backend. - The backend exchanges the code for tokens with Google and validates the ID token (verifying signature, audience, etc.). - The backend then issues its own session or JWT for the frontend. If you need a full backend code sample, the knowledge sources do not include one, but the Refine example demonstrates the frontend integration and flow. --- Summary:
Yes, Refine has a working example of callback-based Google OAuth (no popup). The backend should handle the code exchange and validation. For more details and code, see the Google Auth example. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
<@643828298387947521> Kapa.ai is still learning and improving, please let me know how I did by reacting below.