Twitter login in Ionic 4 apps using Native Storage

---

This is Part-1 of two post series. In this post, you will learn how to implement a Twitter authentication in Ionic 4 apps using Native Storage. Part 2 of the series discusses how to use Twitter login with Firebase 🔥

We will create a sample app, where users can login using their Twitter account. After login, user can see their basic profile information on home page.

Complete source code of this tutorial is available in the Ionic-4-twitter-auth starter.

Twitter login — What and why

There are several reasons why you should use a Twitter login in your app

• Ease of use — When a new user uses your app, only two buttons clicks are required to login using Twitter. In other scenario, user will have to type in an email / password and login
• No “forgot password” — When your app uses Twitter login, the user does not have to worry about forgetting password for your app’s login
• No “verify email” — If you use a custom-email authentication of your own, you will have to verify the email if it is a valid one or not. Twitter login will always have a valid email / phone number associated.
• Single solution — Twitter login can allow your users to use single login credentials across multiple devices
• Twitter integration — If your app uses Twitter authentication, you can use Twitter APIs inside your app as well. This can include fetching user tweets etc.
• Trust — Nowadays, people generally trust social logins more over custom email logins. Social logins follows standard privacy protocols and hence are more reliable for information sharing

Ionic Authentication

Ionic framework has been around for around 5 years, and has been very popular among developers for its ease of usage over Swift / Java. Plus it requires you to have single source code for both an Android and an iOS app. What more can a developer ask for !

Ionic 4 is the latest version (at the time of writing this post) of Ionic, and is much more reliable and robust than previous versions.

There are several ways of Authentication in Ionic 4 apps

• Create you own back-end — You can create your own back-end in Node.js, Go, Django or Ruby-on-rails, and connect your app authentication to your own back-end. This method is favored by developers who need full control over the user authentication. But this method is the most time taking one as well.
• Back-end as a Service (BaaS) — You can use pre-built BaaS platforms which allows easy integration of authentication in your apps. Basically, these platforms provide you a ready-made back-end, so you don’t have to make one on your own. Firebase, Parse, Back4App are some BaaS platforms. Firebase is the most popular among these for mobile apps, which we’ll study in next section
• Social logins — Social logins are a popular and easy way of authentication in mobile apps. You must have seen Google, Facebook, Instagram logins in almost all the modern apps. Social logins are easy to use and more reliable for quick integrations.

Native Storage

This post concerns with Native Storage only. For Firebase implementation, check Part-2 of this series

Native storage is an Ionic / Cordova plugin which is created because of the non-persistent property of LocalStorage in the WebView of Android and iOS. In iOS, stored data from LocalStorage can be removed when the device is running out of memory. Hence, saving login data in persistent memory is always the best option.

We will use Native Storage to store user profile information once the Twitter login is done.

A word on Twitter authentication

As mentioned earlier, we are going to implement Twitter authentication using two different storage methods

• Native Storage
• Firebase

In both cases, we will use the Ionic Twitter Connect Plugin to interact with Twitter and authenticate the user. Once the login is done, we receive user profile information. This information will be saved in Native storage / Firebase. This acts as a safe storage for user sessions because non-persistent LocalStorage data can be removed by the device. When user closes the app and return to the app, the information saved in Native Storage or session stored in Firebase will allow user to auto-login.

How you fetch profile info in each case is entirely up to you. Following are the possibilities

1. Native Storage — You can save user login token in native storage, and fetch profile info in the app every time
2. Native Storage — You can save login token and user profile info in native storage. No need to fetch profile info in the app every time
3. Firebase — You can save user login token in Firebase, and fetch profile info in the app every time
4. Firebase — You can save login token and user profile info in Firebase. No need to fetch profile info in the app every time

In this post, we will use Method 2. In the next part of this post, we will use Method 3.

Steps for Twitter authentication

We will follow these step-by-step instructions to create our Ionic 4 app with Twitter authentication

• Step 1 — Obtain Fabric API key
• Step 2 — Create your Twitter app
• Step 3 — Create your basic Ionic 4 app
• Step 4 — Integrate Twitter connect plugin and implement authentication
• Step 5 — Build your app for iOS
• Step 6 — Store the Twitter profile info in Native Storage

Next Post

• Step 1 — Connect you app with Firebase
• Step 2 — Store the Twitter auth tokens in Firebase
• Step 3 — Use Firebase to auto-login the user

Step 1 — Obtain Fabric API key

Fabric is an extension of Crashlytics, which is a Google owned company whose main product is a SDK for crash reporting, application logging, online review and statistical analysis of application logs. It supports iOS, Android and Unity. It was acquired earlier by Twitter, and till date, twitter login requires a Fabric API Key

To get a Fabric API key, register on Fabric. Once you are inside the Dashboard, the navigation is a little confusing.

Click the ⚙️ Settings icon -> Choose Organizations. You will see your organization in a page. If you don’t have one, create one. Once you have an organization, click to get the details. Here, you will get API KEY link. Click on the link to display your API key.

Another way is to login to Fabric and just go to this link (https://fabric.io/kits/android/crashlytics/install). Go to Install tab, scroll down to see the following section and copy your API key

Step2 — Create your Twitter app

To implement a twitter login, you will need a Twitter app (not THE Twitter app) i.e. you need to create an app in Twitter developer account.

• Create a Twitter developer account — https://developer.twitter.com
• Create a Twitter app on https://developer.twitter.com/en/apps
• When creating the app, make sure to - Enable Twitter Sign-in- Put the Callback URL as twittersdk://

• Once your app is created, find your Consumer API Key and Secret

Step 3 — Create your basic Ionic 4 app

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

$ ionic start IonicTwitter blank

This creates your app with title IonicTwitter and blank template.

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

At the end our Demo app will look like this

Complete source code of these app screens is available in the Ionic-4-twitter-auth starter.

Step 4 — Integrate Twitter connect plugin

To include Twitter login in your Ionic 4 app, you need to install Twitter connect plugin. Install the plugin with following commands

$ ionic cordova plugin add twitter-connect-plugin

$ npm install @ionic-native/twitter-connect

After installation completes, import Twitter module in your app.module.ts

Login function

This function is called on clicking the Login with Twitter button. Overall, the home.page.ts will have following code

Note:

1. showUser() function of the plugin goes in error, even if login is successful
2. By default the profile image url returned gives a very small image. If we remove _normal from the url, the image comes back larger.

When you click Login with Twitter, the authentication is done via Twitter app on your phone, or via a web login. Once logged in, you will receive your profile info in response. The profile info JSON is a large object, so not shown here.

Logout function

We will write the Logout function in profile page. Overall, the profile.page.ts will look like following

Step 5 — Build your app for iOS

Create an iOS (or android) platform, for example

$ ionic cordova platform add ios

And then build the app for device or emulator

$ ionic cordova prepare ios

Open your project (.xcworkspace file) in XCode, and run the app in simulator

Step 6 — Store Twitter profile info in Native Storage

To implement Native storage, we’ll install the Ionic Native plugin for Native Storage, and import it in app.module.ts and our page.ts similar to Twitter

$ ionic cordova plugin add cordova-plugin-nativestorage

$ npm install @ionic-native/native-storage

Once Native storage is imported, you can use following functions

• nativeStorage.setItem(‘user_data’, {JSON object}) — To save data in NativeStorage
• nativeStorage.setItem(‘user_data’) — To retrieve the saved data
• nativeStorage.removeItem(‘user_data’) — To remove the saved data on logout

Now, the most important function of Native Storage for us is to detect whether a user is already logged in when app is started. For this, we will look for user_data object in the Native Storage when the app starts. This code will be implemented in app.component.ts . This allows the app to jump to profile page directly if a user is already logged in.

Note : You are actually not saving the Auth session in Native Storage, but only the profile info. Twitter actually is not logging you out. So, if by mistake case your Native Storage saves wrong info, app will still assume you are logged in, but your profile info will be wrong. You will have to log out and log in again to get the correct info. That’s why saving auth profile info in Native Storage is a bit less reliable than fetching the info in the app each time.

Conclusion

In this post you learnt how to implement Twitter login in your Ionic 4 app.You also learnt how to auto-login your user using profile info stored in Native Storage. In the next part of this post, you’ll learn how to manage the Twitter authentication from Firebase.

Complete source code of this tutorial is available in the Ionic-4-twitter-auth starter.

Next Steps

Now that you have learnt how to implement Twitter login in Ionic 4 apps, there are several things you can do next

• How to implement Phaser game framework in Ionic 4
• How to implement multi-language text in Ionic 4
• How to implement Stripe payment in Ionic 4
• How to implement PayPal payment in Ionic 4
• How to implement Pedometer in Ionic 4
• Integrate Apple Pay in Ionic 4
• Integrate Razorpay in Ionic 4

Need FREE Ionic 4 Starters ?

You can also find free Ionic 4 starters on our website enappd.com

• Free Chat Themes Starter for Ionic 4
• Free Ionic 4 — Phaser game framework integration

You can also make your next awesome app using Ionic 4 Full App