Create Easy Login Page with Google OAuth in your MongoDB Realm App
Sign-up and Sign-in pages might be painful sometimes if you have limited time.
MongoDB Realm, aka Stitch, is a cool and rapid way to get your single page application secure and it makes it easy to create applications with less effort. You may not spend that much time on the backend of your application with Realm. To give it a try, get your free MongoDB account and create your first free cluster with amazing capabilities.
To allow Google OAuth, we need to begin with creating an OAuth 2.0 client from https://console.cloud.google.com/apis/credentials after creating a project.
we will configure the auth settings as shown below. After configuration in google panel, get your Client ID and Client Secret to configure our Realm App to enable Google Oauth Provider.
To allow your Realm to reach out to your google project, you should use URIs and Authorized redirect URIs as shown. If you did not deploy your realm globally select your regions redirection URI from https://docs.mongodb.com/realm/authentication/google/
Note: Since my application created in Stitch which is legacy, I used stitch.mongodb callback. You can go with https://realm.mongodb.com/api/client/v2.0/auth/callback
From Realm Console, select Data Access & Security / Users to choose authorization providers, enable Google from the settings. You can choose from other options listed, you can even enable your application for anonymous log-in.
Save your Secret Key to the Values&Secrets tab so you can use it in providers in your app. Then configure your Realm app in the Providers tab after selecting Google Oauth.
After using your Client ID and Secret, I will be using <AppDomain>/redirect for redirect URI. You can get your application domain using the Hosting tab or you can use http://localhost:3000/redirect for development purposes. You can select the metadata fields and you can restrict the application for <yourcompany>.com. After all these configurations, we can write some code.
After initializing your app, create init-app.ts as shown to connect your Realm with your React-App.
First, let’s add realm-web and add react-router into our application.
npm install realm-web
Then, initialize the realm app in init-app.ts.
In the LoginWithGoogle function, a function is passed defined in the AuthGuard component to set the auth state when the user logged in successfully. useMemo hook is used for better performance.
AuthGuard component, which will be used with ContextApi to manage the authentication state of the user in our app, can be seen below.
Now we can define our application routes and use our context API and authState value in it.
Let’s add router and related types for routing and history.
npm install react-router react-router-dom @types/react-router-dom @types/history
We wrapped the application routes with Guard and defined the routes for our application.
In routes, we restricted Landing pages unless the user is not logged in. Redirect from react-router will help us in this manner.
Lastly, we defined our components as simple as possible to test our authentication system in the application.
The application will first land in the login page since the user is not logged in by the rule we defined in Routes.tsx. Users will log in using the google login page using the pop-up. After that, the Realm application will redirect the application to the URL we set in Realm console which is /redirect. At that point, do not forget to use the handleAuthRedirect function of Realm that will close the pop-up page and return you to the page that you use for logging in. Finally, the user can see the landing page of your application.
Ta-dah! You have a log-in page now. Congrats! You can check it out logs from the Realm console for login status and users.
You can fork GitHub repo from:
