Twitter login in Ionic 4 apps using Native Storage
Tags: ionic, twitter, login, authentication
Published: 2019-09-20 09:33:48

<main role="main"><article class=" u-minHeight100vhOffset65 u-overflowHidden postArticle postArticle--full is-supplementalPostContentLoaded is-withAccentColors" lang="en" ><div class="postArticle-content js-postField js-notesSource editable" id="editor_6" g_editable="true" role="textbox" contenteditable="true" data-default-value="Title
Tell your story…" spellcheck="false"><section name="e758" class="section section--body section--first section--last"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><p name="d06e" class="graf graf--p graf-after--figure">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 🔥</p><p name="d5bb" class="graf graf--p graf-after--p">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.</p><blockquote name="4beb" class="graf graf--blockquote graf-after--p"><em class="markup--em markup--blockquote-em">Complete source code of this tutorial is available in the </em><a href="https://store.enappd.com/product/ionic-4-twitter-login/"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><em class="markup--em markup--blockquote-em">Ionic-4-twitter-auth starter.</em></a></blockquote><h3 name="d599" class="graf graf--h3 graf-after--blockquote is-selected">Twitter login&#8202;—&#8202;What and&nbsp;why</h3><p name="4f2d" class="graf graf--p graf-after--h3">There are several reasons why you should use a Twitter login in your app</p><ul class="postList"><li name="16d8" class="graf graf--li graf-after--p"><strong class="markup--strong markup--li-strong">Ease of use</strong>&#8202;—&#8202;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</li><li name="9351" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">No “forgot password”&#8202;</strong>—&#8202;When your app uses Twitter login, the user does not have to worry about forgetting password for your app’s login</li><li name="e6d2" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">No “verify email”</strong>&#8202;—&#8202;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.</li><li name="05ea" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">Single solution&#8202;—&#8202;</strong>Twitter login can allow your users to use single login credentials across multiple devices</li><li name="3e01" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">Twitter integration</strong>&#8202;—&#8202;If your app uses Twitter authentication, you can use Twitter APIs inside your app as well. This can include fetching user tweets etc.</li><li name="b474" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">Trust</strong>&#8202;—&#8202;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</li></ul><h3 name="26e3" class="graf graf--h3 graf-after--li">Ionic Authentication</h3><p name="d3eb" class="graf graf--p graf-after--h3">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&nbsp;!</p><p name="fc16" class="graf graf--p graf-after--p">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.</p><p name="9429" class="graf graf--p graf-after--p">There are several ways of Authentication in Ionic 4 apps</p><ul class="postList"><li name="3dbc" class="graf graf--li graf-after--p"><strong class="markup--strong markup--li-strong">Create you own back-end</strong>&#8202;—&#8202;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.</li><li name="7aff" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">Back-end as a Service (BaaS)&#8202;—&#8202;</strong>You<strong class="markup--strong markup--li-strong"> </strong>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.&nbsp;<br><strong class="markup--strong markup--li-strong"><em class="markup--em markup--li-em">Firebase</em></strong> is the most popular among these for mobile apps, which we’ll study in next section</li><li name="17df" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">Social logins&#8202;</strong>—&#8202;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.</li></ul><h3 name="51aa" class="graf graf--h3 graf-after--li">Native Storage</h3><blockquote name="5b7e" class="graf graf--blockquote graf-after--h3">This post concerns with Native Storage only. For Firebase implementation, check Part-2 of this series</blockquote><p name="95e2" class="graf graf--p graf-after--blockquote">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.</p><p name="311e" class="graf graf--p graf-after--p">We will use Native Storage to store user profile information once the Twitter login is done.</p><h3 name="5112" class="graf graf--h3 graf-after--p">A word on Twitter authentication</h3><p name="6fdd" class="graf graf--p graf-after--h3">As mentioned earlier, we are going to implement Twitter authentication using two different storage methods</p><ul class="postList"><li name="a08e" class="graf graf--li graf-after--p">Native Storage</li><li name="d509" class="graf graf--li graf-after--li">Firebase</li></ul><p name="117a" class="graf graf--p graf-after--li">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. <strong class="markup--strong markup--p-strong">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.</strong></p><p name="c550" class="graf graf--p graf-after--p">How you fetch profile info in each case is entirely up to you. Following are the possibilities</p><ol class="postList"><li name="37ca" class="graf graf--li graf-after--p">Native Storage&#8202;—&#8202;You can save user login token in native storage, and fetch profile info in the app every time</li><li name="b298" class="graf graf--li graf-after--li">Native Storage&#8202;—&#8202;You can save login token and user profile info in native storage. No need to fetch profile info in the app every time</li><li name="82be" class="graf graf--li graf-after--li">Firebase&#8202;—&#8202;You can save user login token in Firebase, and fetch profile info in the app every time</li><li name="45b2" class="graf graf--li graf-after--li">Firebase&#8202;—&#8202;You can save login token and user profile info in Firebase. No need to fetch profile info in the app every time</li></ol><p name="fc6b" class="graf graf--p graf-after--li"><strong class="markup--strong markup--p-strong">In this post, we will use Method 2. In the next part of this post, we will use Method 3.</strong></p><h3 name="fba6" class="graf graf--h3 graf-after--p">Steps for Twitter authentication</h3><p name="d58e" class="graf graf--p graf-after--h3">We will follow these step-by-step instructions to create our Ionic 4 app with Twitter authentication</p><ul class="postList"><li name="07c9" class="graf graf--li graf-after--p">Step 1&#8202;—&#8202;Obtain Fabric API key</li><li name="1f95" class="graf graf--li graf-after--li">Step 2&#8202;—&#8202;Create your Twitter app</li><li name="dfe4" class="graf graf--li graf-after--li">Step 3&#8202;—&#8202;Create your basic Ionic 4 app</li><li name="f9ac" class="graf graf--li graf-after--li">Step 4&#8202;—&#8202;Integrate Twitter connect plugin and implement authentication</li><li name="4f1b" class="graf graf--li graf-after--li">Step 5&#8202;—&#8202;Build your app for iOS</li><li name="095c" class="graf graf--li graf-after--li">Step 6&#8202;—&#8202;Store the Twitter profile info in Native Storage</li></ul><p name="eb8a" class="graf graf--p graf-after--li">Next Post</p><ul class="postList"><li name="ed80" class="graf graf--li graf-after--p">Step 1&#8202;—&#8202;Connect you app with Firebase</li><li name="afca" class="graf graf--li graf-after--li">Step 2&#8202;—&#8202;Store the Twitter auth tokens in Firebase</li><li name="617c" class="graf graf--li graf-after--li">Step 3&#8202;—&#8202;Use Firebase to auto-login the user</li></ul><h3 name="7257" class="graf graf--h3 graf-after--li">Step 1&#8202;—&#8202;Obtain Fabric API&nbsp;key</h3><p name="a304" class="graf graf--p graf-after--h3">Fabric is an extension of <em class="markup--em markup--p-em">Crashlytics</em>, 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 <a href="https://en.wikipedia.org/wiki/IOS"  class="markup--anchor markup--p-anchor" title="IOS" rel="noopener"    target="_blank">iOS</a>, <a href="https://en.wikipedia.org/wiki/Android_%28operating_system%29"  class="markup--anchor markup--p-anchor" title="Android (operating system)" rel="noopener"    target="_blank">Android</a> and <a href="https://en.wikipedia.org/wiki/Unity_%28game_engine%29"  class="markup--anchor markup--p-anchor" title="Unity (game engine)" rel="noopener"    target="_blank">Unity</a>. It was acquired earlier by Twitter, and till date, twitter login requires a <strong class="markup--strong markup--p-strong">Fabric API Key</strong></p><p name="af95" class="graf graf--p graf-after--p">To get a Fabric API key, register on <a href="https://www.fabric.io"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Fabric</a>. Once you are inside the Dashboard, the navigation is a little confusing.</p><p name="4444" class="graf graf--p graf-after--p">Click the ⚙️ Settings icon -&gt; Choose <strong class="markup--strong markup--p-strong">Organizations. </strong>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 <strong class="markup--strong markup--p-strong">API KEY </strong>link. Click on the link to display your API key.</p><figure tabindex="0" contenteditable="false" name="d7a6" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 421px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 60.099999999999994%;"></div><img class="graf-image" data-image-id="1*S6mP9zgmrfzNgHy9MMvf-A.png" data-width="868" data-height="522" src="https://cdn-images-1.medium.com/max/800/1*S6mP9zgmrfzNgHy9MMvf-A.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Your Fabric API&nbsp;Key</figcaption></figure><p name="8b1c" class="graf graf--p graf-after--figure">Another way is to login to Fabric and just go to this link (<a href="https://fabric.io/kits/android/crashlytics/install"  class="markup--anchor markup--p-anchor" rel="noopener" target="_blank">https://fabric.io/kits/android/crashlytics/install</a>). Go to <strong class="markup--strong markup--p-strong">Install</strong> tab, scroll down to see the following section and copy your API key</p></div><div class="section-inner sectionLayout--outsetColumn"><figure tabindex="0" contenteditable="false" name="f40e" class="graf graf--figure graf--layoutOutsetCenter graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 1032px; max-height: 598px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 57.9%;"></div><img class="graf-image" data-image-id="1*2HrcLiTqBKvYLvCZUzICDw.png" data-width="1164" data-height="674" src="https://cdn-images-1.medium.com/max/1200/1*2HrcLiTqBKvYLvCZUzICDw.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Your Fabric API Key in code&nbsp;snippet</figcaption></figure></div><div class="section-inner sectionLayout--insetColumn"><h3 name="7272" class="graf graf--h3 graf-after--figure">Step2&#8202;—&#8202;Create your Twitter&nbsp;app</h3><p name="4950" class="graf graf--p graf-after--h3">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.</p><ul class="postList"><li name="38f6" class="graf graf--li graf-after--p">Create a Twitter developer account&#8202;—&#8202;<a href="https://developer.twitter.com/"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">https://developer.twitter.com</a></li><li name="0cfa" class="graf graf--li graf-after--li">Create a Twitter app on <a href="https://developer.twitter.com/en/apps"  class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">https://developer.twitter.com/en/apps</a></li><li name="b140" class="graf graf--li graf-after--li">When creating the app, make sure to&nbsp;<br>- Enable <strong class="markup--strong markup--li-strong">Twitter Sign-in</strong><br>- Put the <strong class="markup--strong markup--li-strong">Callback URL</strong> as <code class="markup--code markup--li-code">twittersdk://</code></li></ul></div><div class="section-inner sectionLayout--outsetColumn"><figure tabindex="0" contenteditable="false" name="bfd3" class="graf graf--figure graf--layoutOutsetCenter graf-after--li"><div class="aspectRatioPlaceholder is-locked" style="max-width: 1032px; max-height: 570px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 55.300000000000004%;"></div><img class="graf-image" data-image-id="1*LvbqRpcn7-5UFtT90gEN1A.png" data-width="1388" data-height="767" src="https://cdn-images-1.medium.com/max/1200/1*LvbqRpcn7-5UFtT90gEN1A.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Create a Twitter App with required&nbsp;options</figcaption></figure></div><div class="section-inner sectionLayout--insetColumn"><ul class="postList"><li name="a6ef" class="graf graf--li graf-after--figure">Once your app is created, find your Consumer API Key and Secret</li></ul><figure tabindex="0" contenteditable="false" name="3964" class="graf graf--figure graf-after--li"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 452px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 64.60000000000001%;"></div><img class="graf-image" data-image-id="1*OJRrIzkkz08RWHJYcFcVxw.png" data-width="955" data-height="617" src="https://cdn-images-1.medium.com/max/800/1*OJRrIzkkz08RWHJYcFcVxw.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Twitter consumer API key and&nbsp;secret</figcaption></figure><h3 name="d355" class="graf graf--h3 graf-after--figure">Step 3&#8202;—&#8202;Create your basic Ionic 4&nbsp;app</h3><p name="536e" class="graf graf--p graf-after--h3">Creating a basic Ionic 4 app is very easy. Assuming you have all basic requirements installed in your system, run</p><pre name="edac" class="graf graf--pre graf-after--p">$ ionic start IonicTwitter blank</pre><p name="2fb6" class="graf graf--p graf-after--pre">This creates your app with title <code class="markup--code markup--p-code">IonicTwitter</code> and blank template.</p><blockquote name="166d" class="graf graf--blockquote graf-after--p">For more details on how to create a basic Ionic 4 app, refer to our blog <a href="https://medium.com/enappd/how-to-create-an-ionic-4-app-for-beginners-e181e116190a"  class="markup--anchor markup--blockquote-anchor"    target="_blank">How to create an Ionic 4 app</a></blockquote><p name="5853" class="graf graf--p graf-after--blockquote"><strong class="markup--strong markup--p-strong">At the end our Demo app will look like this</strong></p><figure tabindex="0" contenteditable="false" name="f74a" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 655px; max-height: 445px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 67.9%;"></div><img class="graf-image" data-image-id="1*om_08ruR6tgO_8hbhjm1tw.jpeg" data-width="655" data-height="445" src="https://cdn-images-1.medium.com/max/800/1*om_08ruR6tgO_8hbhjm1tw.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Ionic 4 Twitter Auth&nbsp;app</figcaption></figure><blockquote name="1374" class="graf graf--blockquote graf-after--figure"><em class="markup--em markup--blockquote-em">Complete source code of these app screens is available in the </em><a href="https://store.enappd.com/product/ionic-4-twitter-login/"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><em class="markup--em markup--blockquote-em">Ionic-4-twitter-auth starter.</em></a></blockquote><h3 name="3f94" class="graf graf--h3 graf-after--blockquote">Step 4&#8202;—&#8202;Integrate Twitter connect&nbsp;plugin</h3><p name="09ad" class="graf graf--p graf-after--h3">To include Twitter login in your Ionic 4 app, you need to install Twitter connect plugin. Install the plugin with following commands</p><pre name="f768" class="graf graf--pre graf-after--p">$ ionic cordova plugin add twitter-connect-plugin</pre><pre name="3b8d" class="graf graf--pre graf-after--pre">$ npm install @ionic-native/twitter-connect</pre><p name="13ee" class="graf graf--p graf-after--pre">After installation completes, import Twitter module in your <code class="markup--code markup--p-code">app.module.ts</code></p><figure tabindex="0" contenteditable="false" name="ee27" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 379px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 54.1%;"></div><img class="graf-image" data-image-id="1*50WPHd2mb8ST8f8utAarXQ.png" data-width="756" data-height="409" src="https://cdn-images-1.medium.com/max/800/1*50WPHd2mb8ST8f8utAarXQ.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Import TwitterConnect in app.module.ts</figcaption></figure><h4 name="ffd8" class="graf graf--h4 graf-after--figure">Login function</h4><p name="19a2" class="graf graf--p graf-after--h4">This function is called on clicking the <strong class="markup--strong markup--p-strong">Login with Twitter </strong>button. Overall, the <code class="markup--code markup--p-code">home.page.ts</code> will have following code</p><figure tabindex="0" contenteditable="false" name="c889" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/500885fc5e842d32f6537d5e92b6c5fb.js %}</div></div></figure><p name="6327" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">Note:</strong></p><ol class="postList"><li name="c704" class="graf graf--li graf-after--p">showUser() function of the plugin goes in error, even if login is successful</li><li name="f6b1" class="graf graf--li graf-after--li">By default the profile image url returned gives a very small image. If we remove <code class="markup--code markup--li-code">_normal</code> from the url, the image comes back larger.</li></ol><p name="d955" class="graf graf--p graf-after--li">When you click <strong class="markup--strong markup--p-strong">Login with Twitter, </strong>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.</p><h4 name="c394" class="graf graf--h4 graf-after--p">Logout function</h4><p name="c110" class="graf graf--p graf-after--h4">We will write the Logout function in profile page. Overall, the <code class="markup--code markup--p-code">profile.page.ts</code> will look like following</p><figure tabindex="0" contenteditable="false" name="58bd" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/097efefa5eeb62128a5c1ef4d8a4945f.js %}</div></div></figure><h3 name="ad21" class="graf graf--h3 graf-after--figure">Step 5&#8202;—&#8202;Build your app for&nbsp;iOS</h3><p name="521f" class="graf graf--p graf-after--h3">Create an iOS (or android) platform, for example</p><pre name="6e47" class="graf graf--pre graf-after--p">$ ionic cordova platform add ios</pre><p name="e0e9" class="graf graf--p graf-after--pre">And then build the app for device or emulator</p><pre name="da3e" class="graf graf--pre graf-after--p">$ ionic cordova prepare ios</pre><p name="5653" class="graf graf--p graf-after--pre">Open your project (.xcworkspace file) in XCode, and run the app in simulator</p><figure tabindex="0" contenteditable="false" name="a330" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 426px; max-height: 826px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 193.9%;"></div><img class="graf-image" data-image-id="1*Im2MUpof5UFkaGha5p_E5w.gif" data-width="426" data-height="826" src="https://cdn-images-1.medium.com/max/800/1*Im2MUpof5UFkaGha5p_E5w.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Twitter login (after first&nbsp;login)</figcaption></figure><h3 name="89df" class="graf graf--h3 graf-after--figure">Step 6&#8202;—&#8202;Store Twitter profile info in Native&nbsp;Storage</h3><p name="4d37" class="graf graf--p graf-after--h3">To implement Native storage, we’ll install the Ionic Native plugin for Native Storage, and import it in <code class="markup--code markup--p-code">app.module.ts</code> and our <code class="markup--code markup--p-code">page.ts</code> similar to Twitter</p><pre name="3e5b" class="graf graf--pre graf-after--p">$ ionic cordova plugin add cordova-plugin-nativestorage</pre><pre name="a0e1" class="graf graf--pre graf-after--pre">$ npm install @ionic-native/native-storage</pre><p name="1a3b" class="graf graf--p graf-after--pre">Once Native storage is imported, you can use following functions</p><ul class="postList"><li name="0287" class="graf graf--li graf-after--p"><strong class="markup--strong markup--li-strong">nativeStorage.setItem(‘user_data’, {JSON object})</strong>&#8202;—&#8202;To save data in NativeStorage</li><li name="84b8" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">nativeStorage.setItem(‘user_data’)&#8202;—&#8202;</strong>To retrieve the saved data</li><li name="32b1" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">nativeStorage.removeItem(‘user_data’)&#8202;—&#8202;</strong>To remove the saved data on logout</li></ul><p name="cb97" class="graf graf--p graf-after--li">Now, the most important function of Native Storage for us is <strong class="markup--strong markup--p-strong">to detect whether a user is already logged in</strong> when app is started. For this, we will look for <code class="markup--code markup--p-code">user_data</code> object in the Native Storage when the app starts. This code will be implemented in <code class="markup--code markup--p-code">app.component.ts</code>&nbsp;. This allows the app to jump to profile page directly if a user is already logged in.</p><figure tabindex="0" contenteditable="false" name="3490" class="graf graf--figure graf--iframe graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/a25a36bd2c07a51a2865f03bb29330da.js %}</div></div><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for embed (optional)">Auto loggin in the user using profile info saved in Native Storage</figcaption></figure><p name="873e" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">Note&nbsp;: </strong>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.</p><h3 name="ad55" class="graf graf--h3 graf-after--p">Conclusion</h3><p name="9011" class="graf graf--p graf-after--h3">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.</p><blockquote name="e39a" class="graf graf--blockquote graf-after--p"><em class="markup--em markup--blockquote-em">Complete source code of this tutorial is available in the </em><a href="https://store.enappd.com/product/ionic-4-twitter-login/"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><em class="markup--em markup--blockquote-em">Ionic-4-twitter-auth starter.</em></a></blockquote><h3 name="ee1b" class="graf graf--h3 graf-after--blockquote">Next Steps</h3><p name="8964" class="graf graf--p graf-after--h3">Now that you have learnt how to implement Twitter login in Ionic 4 apps, there are several things you can do next</p><ul class="postList"><li name="e62a" class="graf graf--li graf-after--p">How to implement <a href="https://enappd.com/blog/how-to-create-mobile-games-pwa-with-ionic-4-and-phaser/19"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Phaser game framework in Ionic 4</a></li><li name="21d0" class="graf graf--li graf-after--li">How to i<a href="https://enappd.com/blog/how-to-translate-in-ionic-4-globalization-internationalization-and-localization/11"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">mplement multi-language text in Ionic 4</a></li><li name="d038" class="graf graf--li graf-after--li">How to i<a href="https://enappd.com/blog/ionic-4-stripe-payment-integration-with-firebase-for-apps-and-pwa/17"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">mplement Stripe payment in Ionic 4</a></li><li name="3f89" class="graf graf--li graf-after--li">How to i<a href="https://enappd.com/blog/ionic-4-paypal-payment-integration-for-apps-and-pwa/16"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">mplement PayPal payment in Ionic 4</a></li><li name="ede6" class="graf graf--li graf-after--li">How to <a href="https://enappd.com/blog/best-fitness-plugins-for-ionic-4-how-to-use-pedometer/15"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">implement Pedometer in Ionic </a>4</li><li name="80f9" class="graf graf--li graf-after--li">Integrate <a href="https://enappd.com/blog/how-to-integrate-apple-pay-in-ionic-4-apps/21"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Apple Pay in Ionic 4</a></li><li name="55b4" class="graf graf--li graf-after--li">Integrate <a href="https://enappd.com/blog/how-to-integrate-razorpay-in-ionic-4-apps-and-pwa/20"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Razorpay in Ionic 4</a></li></ul><h3 name="924d" class="graf graf--h3 graf-after--li">Need FREE Ionic 4 Starters&nbsp;?</h3><p name="eff2" class="graf graf--p graf-after--h3">You can also find free Ionic 4 starters on our website <a href="http://enappd.com"  class="markup--anchor markup--p-anchor" rel="noopener nofollow noopener noopener nofollow noopener noopener nofollow noopener noopener noopener"    target="_blank">enappd.com</a></p><ul class="postList"><li name="2b12" class="graf graf--li graf-after--p"><a href="https://store.enappd.com/product/free-chat-themes-ionic4/"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener nofollow noopener noopener nofollow noopener noopener noopener"    target="_blank">Free Chat Themes Starter for Ionic 4</a></li><li name="a4be" class="graf graf--li graf-after--li"><a href="https://medium.com/enappd/how-to-create-mobile-games-pwa-with-ionic4-and-phaser-7fb1e917678e"  class="markup--anchor markup--li-anchor"    target="_blank">Free Ionic 4&#8202;—&#8202;Phaser game framework integration</a></li></ul><p name="2930" class="graf graf--p graf-after--li">You can also make your next awesome app using <a href="https://store.enappd.com/product/ionic-4-full-app/"  class="markup--anchor markup--p-anchor" rel="noopener nofollow noopener noopener nofollow noopener noopener nofollow noopener noopener noopener"    target="_blank">Ionic 4 Full App</a></p><figure tabindex="0" contenteditable="false" name="9ef5" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 436px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 62.3%;"></div><img class="graf-image" data-image-id="1*gvh4PRFmNar6eSHB20VJTg.jpeg" data-width="1540" data-height="960" src="https://cdn-images-1.medium.com/max/800/1*gvh4PRFmNar6eSHB20VJTg.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Make your next awesome app with Ionic 4 Full&nbsp;App</figcaption></figure><p name="264d" class="graf graf--p graf--empty graf-after--figure graf--trailing"><br></p></div></div></section></div></article></main>