Implementing Email/Password Authentication into Your React Native App with Atlas App Services.
Hi Coders,
Atlas App Services offers several Authentication providers to sign into your mobile application. In this article, we will focus on the Email/Password authentication that will be implemented into a react native App using Realm.
Prerequisites
You will need Node, Watchman, the React Native command line interface, Xcode, CocoaPods, a JDK and Android Studio.
If it is the first time you are building a React Native Project, go to the documentation of React Native in order to set up your development environment and create an app.
React Native allows you to develop cross-platform iOS and Android applications using Javascript.
Create a server-side App for your Mobile App
Atlas App Services provides a suite of managed cloud services including Atlas Device Sync, serverless cloud functions, declarative data access rules, and more. You can use App Services to write and host a full application in a managed cloud environment backed by MongoDB Atlas.
Realm is an embedded, object-oriented database that lets you build real-time, offline-first applications. Its SDKs also provide access to Atlas App Services, a secure backend that can sync data between devices, authenticate and manage users, and run serverless JavaScript functions.
First, create an atlas account by following this tutorial.
Once it is done, create a new App on the Cloud by clicking on the App Services tab.
Click on Create a New App
Choose a name for your app and link your database to an existing MongoDB Atlas Data Source since the data of your application will be stored in your linked MongoDB Atlas Cluster.
If you wish, you can also connect it to Github and already choose your Deployment Model.
Once it’s done, click on Create App Service.
Create a web page
In order to sign up, the user will enter his email and a new password into the mobile app and click on SIGN UP.
Following entering his details, the user will receive an email.
We will configure it later on the App Service Authentication Provider in the next section. In this case, the user will have to click on Confirm Email and will be redirected to a web page.
Steps to reproduce to create a webpage
- Open your favorite IDE and create an index.html page and past the following code:
In order to connect to Realm, you need to provide your App Id. As you can see in the code, we get the tokens from the URL.We use a function and pass these tokens in order to confirm the email.
2. Host the webpage
Atlas App Services Hosting allows you to host, manage, and serve your application’s static media and document files.
In order to host your page go to your App Service App that you created earlier and click on hosting that is located on the left tab under manage. After you clicked on hosting click on Enable Hosting.
In order to host your own website, delete the existing index.html file and upload the index file we just created. As you can see on the following picture, there is an URL that will be used in the next section.
Authentication Provider
You have the possibility to choose between different Authentication Providers.
For this tutorial, we chose Email/Password.
In order to do so, enter into your App in Atlas App Services, click on the Authentication Tab and chose Email/Password.
Steps to reproduce:
- Enable the provider
- User Confirmation Method :
In this tutorial, we will send a confirmation email. Please note that it is recommended to send a confirmation email only for development. For production, it is recommend to run a confirmation function.
In addition, you can use this tutorial as well for Password Reset. It works in the same way. - Email Confirmation URL : Insert the URL of the webpage we hosted in the previous section.
- Choose an Email Confirmation Subject that will appears in the email that will be sent to the user.
Realm SDK and Email/Password auth integration into React Native app
Install Realm with npm:npm install realm
Create a realmApp.js file to connect to your realm app
In your app.js file, replace the content with :
Final result
App Users & Logs
After adding a user, go to your realm UI to see the added users and pending ones. On the UI, you have access to interesting information like the type of devices, metadata, status, etc.
In addition, by clicking on the view activity button, you have access to the logs.
I hope you enjoyed the tutorial :). For any questions, comment this post.
