Vaibhav Gehani for Enappd

Posted on Jun 30, 2022 • Originally published at enappd.com on Mar 7, 2022

Passwordless Email Link Login Using Firebase Auth in Ionic Angular App

#emaillogin #passwordlesslogin #firebase #ionicangular

In this tutorial, we will learn how to perform an Email Link Signup with both password and passwordless methods. Most of the tutorial only contains the passwordless method but in the end, we will cover Email Link Signup with Password as well. We will use the Ionic 5 application which is based on the Angular framework — with Firebase (the most popular combo). However this tutorial can be followed for another framework also like React and Vue, only changes will be in a few steps.

If you want to know more about any of these topics or any other tech stack you can explore HERE.

What is Ionic 5?

You probably already know about Ionic, but I’m putting it here just for the sake of beginners, feel free to skip this section. Ionic is a complete open-source SDK for hybrid mobile app development created by Max Lynch, Ben Sperry, and Adam Bradley of Drifty Co. in 2013. Ionic provides tools and services for developing hybrid mobile apps using Web technologies like CSS, HTML5, and Sass. Apps can be built with these Web technologies and then distributed through native app stores to be installed on devices by leveraging Cordova.

So, in other words — If you create Native apps in Android, you code in Java. If you create Native apps in iOS, you code in Obj-C or Swift. Both of these are powerful but complex languages. With Cordova (and Ionic) you can write a single piece of code for your app that can run on both iOS and Android. (and windows!), that too with the simplicity of HTML, CSS, and JS. Now the Ionic team has released Capacitor as a replacement for Cordova — however, that will not impact much of this tutorial.

Steps for Email-based Signup :

I will go ahead in a step-by-step fashion so you can follow easily.

Create a Firebase project and explore the Firebase Auth
Create a basic Ionic 5 Angular app
Connect your Ionic 5 Angular app with Firebase and code the Email Link Logic
Email Link Signup Application Build.

1. Create a Firebase project and explore Firebase Auth

Go to Firebase and create your first project (or use an existing one). Your console should look like this :

Note — It’s really easy to create a Firebase project, but if you still face any issue, follow steps 1–4 of this blog

Click on your project and you’ll enter the project’s dashboard. Look for the Authentication tab. This is where the magic will happen!

In the Authentication tab, we have various options to explore like Users, Sign In Methods, and more.

Users Tab :- Initially this tab may look empty as you have not signed up any users. But once users start coming to your app, this tab shows the details of Signed Up users like their username or email Id , Provider (Type of login : Email Login, Social Logins or another type of login), and User ID (unique id which identifies the user). We can disable or delete any user in our Firebase Project.
Sign In Methods :- This tab, helps us to enable the sign-in methods, which we will use to implement Email Link Login in the Ionic 5 Angular App. To enable the Email Link Login, first, we have to enable the Email Login.

We have different options for sign-in, like Email Login, social logins (Google, Facebook and Twitter), phone login, apple login, Microsoft login, and more. Now we will look at Email Login with Email Link Authentication. Enable the Email/password Auth and Email Link (passwordless authentication). [If you want to explore other Auth methods we have various blogson those ]

After Enabling, our firebase work is completed now we have to proceed to sstep 2.

2. Create a basic Ionic 5 app

Creating a basic Ionic 5 Angular app is very easy. Assuming you have all basic requirements installed in your system, run

$ ionic start MyApp blank

This creates your app with a titleMyApp and a blank template.

For more details on how to create a basic Ionic 5 app, refer to my blog How to create an Ionic 5 app

3. Integrate firebase with Ionic 5 App and Add Email Link Logic

In this Part, we will cover two methods for Email Link Signup:-

i) Email Link Signup using passwordless Sign in:-

ii) Email Link Signup using with Password:-

The above two methods can be used to Signup in the Ionic 5 App, but this restricts the user to enter the valid username. The procedure for Email Link Signup is as follows:-

The user will enter the Email Id.
An email verification link will be sent to the entered Email Id.
When we click on the Email link provided in the mail, then the control will be redirected to the Ionic application. (will use Firebase Dynamic Link Plugin).
At Last, the Ionic 5 App will check for the deep links provided in the clicked Link and redirect the user to the Home Page.

Now we know the flow, so we can go with the flow and start to code:-

3.1 Create a Firebase project

To create a firebase project, goto Firebase Console and create a new project (if you do not have it already).

Note — It’s really easy to create a Firebase project, but if you still face any issue, follow step 1–4 of this blog

Click on your project and you’ll enter the project’s dashboard (as shown below). Look for the Authentication tab. This is where the magic will happen !

Here you have to enable Email/Password authentication type. This will help us to login using email link and password.

Once you are ready with the Firebase Project, now we have to create an android app into the firebase project.

3.2 Create Android app in Firebase

For setting up options, you’ll first have to create an Android app in Firebase console. During the process, it will ask you to enter app’s package name and provide google-services.json.

To create android app you can goto Project settings and add the app from there.

And then click on the Add App button to add a new Android/iOS or web application. In our example we will create and Android App.

Make sure you keep the package name same as what you are setting in config.xml file of Ionic app.

3.3 Installing Required Packages for Ionic App

Before starting we will install the required packages in our Ionic 5 Angular application like firebase, firebase dynamic link Plugin. To install firebase we need to install @angular/fire which provides the various firebase modules like Auth Module, Firestore Module, Storage Module, and more.

To install angular fire run the below command in your project root directory:-

$ npm install @angular/fire

3.4 Configure Dynamic links in Firebase Console

To make Dynamic links work, first, you have to enable the Dynamic Links in the Firebase console.

Now we have to set up the Dynamic link, by setting the domain name. The domain is already suggested by the Firebase, you should select it by default it will configure itself and finally, you can use it in your app.

3.5 Configuring the Ionic 5 Angular App

Then we will use this domain while installing the Firebase Dynamic Links Plugin like used below command (run the command in Ionic App’s root project directory):-

$ cordova plugin add cordova-plugin-firebase-dynamiclinks --variable APP_DOMAIN_NAME="mydomain.page.link"

$ npm install @ionic-native/firebase-dynamic-links

You must use “your” dynamic link value in APP_DOMAIN_NAME and replace the mydomain.page.link. Once the plugin is installed, we have to configure it by adding some lines in Config.xml.

<platform name="ios">
    <preference name="GoogleIOSClientId" value="..." />
</platform>
<platform name="android">
    <preference name="GoogleAndroidClientId" value="..." />
</platform>

You can get your GoogleAndroidClientId from google-services.json file, which you can download from Firebase Project settings.

In google-services.json , you will get the key in object.client[0].oauth_client[0].client_id, below is the piece of code using which you can identify.

3.6 Injecting the Required Packages in App.module.ts

Now we have installed the packages and added the config in config.xml , Now we import them in app.module.ts , Below code is of app module file.

3.7 Adding UI code to the Ionic 5 application

Now we have to add UI to the Ionic 5 application, We will have a signup page with Auth services, API services.

Signup page:-

The signup page will look like above, signup.page.html will be coded as:-

Now HTML work is done, we will now add the logic in the signup page for Email Link signup with password:-

EmailLinkSignup(), will be called after filling in the details and clicking on signup. below is the code for EmailLinkSignup();

sendsignInUsingEmailLink() function will be called, It will send the Email to the entered Email Id with verification/redirecting link. The following operation will be performed by the below code:-

async sendsignInUsingEmailLink(_email_: _string_) {
  _console_.log(email);
  _const_ actionCodeSettings = {
    url: ` **\*\*hosted\_app\_URL\*\*** `,
    handleCodeInApp: true,
    android: {
       packageName: ' ****your\_app\_id****'
    }
  };
   return await this.fireAuth.auth.sendSignInLinkToEmail(email, actionCodeSettings);
}

To get the hosted_app_URL , you can go and follow these steps in this Blog. And to get the your_app_id you can go to config.xml under the widget tag like below:-

<widget id="com.example.xxxx" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">

After this function is executed, you will get a mail from firebase. To sign in using the Link like below:-

We have now completed the first step to send the mail to the input Email Id, and now we have to code for redirection from the link to the App. To do that we will use the Firebase Dynamic Links Plugin.

3.8 Adding Subscriber to the App Component file

Now we will add a subscriber, that will let us know that we have come through the Dynamic Link in the Mail. You can set this subscriber where ever you want, but the best practice is to put it under app.component.ts like stated below:-

The above function setEmailLinkSubscriber() can be called under the constructor, so this function will listen for the Link clicks from the user. And you can perform any function you want. The local data stored is users data, the reason to store this locally is as many users exits the app and then enter the app using Dynamic link (Provided in Mail).

The most important function is signInUsingEmailLink(), defined under authService. This will differ if you want a passwordless signup vs a password sign-up.

Passwordless Signup :-

This is quite easy, we only have to call the this.fireAuth.auth.signInWithEmailLink() with email: string , emailLink: string as the parameters ( email Id was already stored in local storage and dynamic link response (res.deepLink) provides deep link).

return this.fireAuth.auth.signInWithEmailLink(email, deeplink);

With Password Signup :-

This method can also be called as 2 -way authentication system, as it first authenticates using the Email Link and secondly it verifies the user with input Password. So to do that follow the below line of code in auth Service.

Now once we have verified that user has come through the Email Link, now we can simply create user using the this.fireAuth.auth.createUserWithEmailAndPassword(email, password), which will create user using the email and password.

4. Build the Android Application

To add and build the Android application, run the below commands :-

$ ionic cordova platform add android
$ ionic cordova run android

Below video is for a completed application, same flow can be seen in your application also.

Conclusion

Now we have enough knowledge to implement the Email Link (with password or passwordless), so we can add one more functionality to our awesome Ionic 5 application and if you want to add more of the functionality in your app. You can visit out Blog Section.

Next Steps

If you liked this blog, you will also find the following Ionic blogs interesting and helpful. Feel free to ask any questions in the comment section

Ionic Payment Gateways — Stripe | PayPal | Apple Pay | RazorPay
Ionic Charts with — Google Charts| HighCharts | d3.js | Chart.js
Ionic Social Logins — Facebook | Google | Twitter
Ionic Authentications — Via Email | Anonymous
Ionic Features — Geolocation | QR Code reader| Pedometer
Media in Ionic — Audio | Video | Image Picker | Image Cropper
Ionic Essentials — Native Storage | Translations | RTL
Ionic messaging — Firebase Push | Reading SMS
Ionic with Firebase — Basics | Hosting and DB | Cloud functions

Ionic React Full App with Capacitor

If you need a base to start your next Ionic 5 React Capacitor app, you can make your next awesome app using Ionic 5 React Full App in Capacitor

Ionic Capacitor Full App (Angular)

If you need a base to start your next Angular Capacitor app , you can make your next awesome app using Capacitor Full App

Ionic Full App (Angular and Cordova)

If you need a base to start your next Ionic 5 app, you can make your next awesome app using Ionic 5 Full App

DEV Community