Google Auth Confusion

MongoDB Realm
#1

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 https://www.npmjs.com/package/react-google-login 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!

#2

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:

https://docs.mongodb.com/realm/react-native/authenticate/#google-oauth

Integrate this code example to complete the authentication and have your sdk objects on the correct user context.

Thanks
Pavel

#3

@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 https://www.npmjs.com/package/react-google-login 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

#4

@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:

https://docs.mongodb.com/realm/node/authenticate/#google-oauth

I don’t see how third party sdk can be used with realm…

Thanks
Pavel

#5

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: https://github.com/realm/realm-js/issues/3249#issuecomment-702758433

#6

Many thanks @kraenhansen. I think I may just wait until that issue is resolved :slight_smile:

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 ?

#7

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.

#8

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

#9

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.