Hi - I’m sorry, this is going to be a real newbie question but I’m hoping someone can help me improve my understanding!
I have a number of 3rd party services / functions in Mongo Realm that are consumed by a React application. I would like to add Google Auth / Login to the React app so that I can create some restricted routes.
I have created my Google project / client ID / secret etc and have used react-google-login - npm to add login/logout buttons. When I click login I receive the usual Google authentication challenge and I can then console.log the details of the user who signed in.
However, I’m confused as to whether I now need to send / persist data from this login transaction to Realm. I have been through the Google authentication setup doc at https://docs.mongodb.com/realm/authentication/google/ (although for some reason it didn’t like any Redirect URI or domain restriction I put in there, saying they were invalid).
Do I now need to create functions in Realm using this https://docs.mongodb.com/realm/authentication/google/ code and send the token from the React app to Realm?
Any guidance / suggested reading much appreciated!
Hi @Stuart_Brown,
Once you created the Realm side configuration with the correct Google and expected application urls you should trigger a Google authentication flow from your respectful used realm sdk when the login button is fired.
I assume you use the react native sdks:
Integrate this code example to complete the authentication and have your sdk objects on the correct user context.
Thanks
Pavel
@Pavel_Duchovny many thanks for the reply :). I’m not using React Native - just standard React for a web app. As such I am using the code suggested at https://docs.mongodb.com/realm/web/authenticate/#google-oauth. I am using react-google-login - npm which works fine independently of Realm.
I have set up Google Oauth with Realm details as per https://docs.mongodb.com/realm/authentication/google/#generate-oauth-client-credentials and also set localhost for allowed domains and redirect address.
When I start the app however I get 'gapi' is not defined which I guess stems from the Promise at https://docs.mongodb.com/realm/web/authenticate/#google-oauth
@Stuart_Brown,
As far as I understand the Google provider through realm is designed to work with one of realm supported sdks.
Perhaps you should use the node js sdk:
I don’t see how third party sdk can be used with realm…
Thanks
Pavel
There are some detials you should be aware of when using a third-party library in the Google OAuth flow: First off, it’s not the only way on web. Second you should ensure that the library you’re using is not consuming the Google “auth code”, since that is a secret which can only be used once. If your client side app uses it, it cannot be used by the MongoDB Realm server. Third, we’re currently experiencing a breaking change in Google’s OAuth service that means Google authentication using auth codes are temporarily blocked from working properly.
I would suggest that you use the redirect URL variant of the Google credentials provided by Realm Web for now.
I’ve written a bit about this, including a piece of JS code to complete Google authentication via a redirect URL on this issue: Error exchanging access code with OAuth2 provider (Google login, web SDK) · Issue #3249 · realm/realm-js · GitHub
Many thanks @kraenhansen. I think I may just wait until that issue is resolved 
For my info, for a React (not React native) should I be using https://docs.mongodb.com/realm/web/authenticate/#google-oauth or https://docs.mongodb.com/realm/node/authenticate/#google-oauth ?
For a web app on React you should go with Realm Web (https://docs.mongodb.com/realm/web/authenticate/#google-oauth) and be aware that this SDK does not have a Realm Sync client, so if you’re planning on accessing data, that would be through the MongoDB service or Functions.
Great thanks. Have you seen any newbie tutorials around this use case (or a repo that demonstrates it)? If not when I go through it I’ll try and put something together
I haven’t personally seen any tutorials around this, but I imagine our developer relations team is working on this as we speak. I would definitely encourage you to share your progress and findings - not only because it can help other developers new to our platform, but also because it helps us see and understand our SDKs and documentation from a new set of eyes.