“Authy” Documentation by “Ionic Premium” v1.0.0

“Authy - Ionic Firebase Social Authentication Full App”

Authy - Ionic Firebase Social Authentication Full App

Updated: 07/30/2018
By: Ionic Premium
Email: [email protected]

Thank you for purchasing Authy - Ionic Firebase Social Authentication Full App. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

Table of Contents

  1. Introduction
  2. Requirements
  3. Folder Structure
  4. Getting Started
  5. References
  6. Support
  7. FAQs
  8. Sources & Credits
  9. Version History

A) Introduction - top

Authy is a Ionic starter full app to learn about Firebase Authentication. Authentication is the most important part of app. Unfortunately, there is no complete and detailed example how to start the authentication using Ionic with Firebase. Authy help you the better understand and easily implement Firebase Authentication into your app.

Lastly, thank you for supporting us in purchasing this product, looking forward to our exciting feature updates for Authy. If you have any question to ask, feel free to contact us.

Regards,
Ionic Premium Team

B) Requirements - top

Here is what you need:

  1. Firebase account
  2. Facebook account

C) Folder Structure - top

When you extract the zip package, you will find this:

D) Getting Started - top

Please follow these step to get the app work. You can also watch our video tutorial below to get started.

D.1) Installing Ionic Framework - top

To run this Ionic, you have to install Ionic Framework by following this step. Download and install devendable version of node.js. Then open your cmd.exe for windows or Terminal for mac and run:

			npm install -g [email protected] ionic
			npm install -g npm
			npm update

Or if you use mac, don’t forget to use "sudo":

			sudo npm install -g [email protected] ionic
			sudo npm install -g npm
			npm update

Ionic and cordova are now ready on your computer. No we need to re-install node_modules and plugins into the app. Go to authy

			npm i
			cordova prepare

Note: Make sure your internet connection is stable and running well. It may take several minutes to install all modules. Ionic and cordova are now ready on your computer.

D.2) Firebase / Firestore Setup - top

In this step you will learn how to create new project from Firebase. We will use Firebase Authentication, store the registered user data into Firestor and save the avatar into Firebase Storage. Create a new project in firebase console. If you already have, then click on it. Check this video below and follow the step-by-step.

D.3) Google Login Setup - top

In this step you will learn how to setting up Google API keys to allow user login into app. We will use Web OAuth client ID for Android and iOS OAuth client ID for iOS.

Android

In order to enable google sign-in for Android, you need to install cordova-plugin-googleplus plugin with your OAuth Client (Web application) from Google Credentials Manager. Your REVERSED_CLIENT_ID would be like this: com.googleusercontent.apps.xxxxxxxxxx-xxxxxxxxxx

			sudo ionic cordova plugin rm cordova-plugin-googleplus; sudo ionic cordova plugin add cordova-plugin-googleplus --save --variable REVERSED_CLIENT_ID="REVERSED_CLIENT_ID"
Android SHA certificate

To get your SHA, add android platform and run android to get your android-debug.apk file. Then, run keytool to get SHA:

			ionic cordova platform add android; ionic cordova run android
			keytool -list -printcert -jarfile platforms/android/build/outputs/apk/debug/android-debug.apk
iOS

In order to enable google sign-in for iOS, you need to install cordova-plugin-googleplus plugin with your OAuth Client (iOS) from Google Credentials Manager. Your REVERSED_CLIENT_ID would be like this: com.googleusercontent.apps.xxxxxxxxxx-xxxxxxxxxx

			sudo ionic cordova plugin rm cordova-plugin-googleplus; sudo ionic cordova plugin add cordova-plugin-googleplus --save --variable REVERSED_CLIENT_ID="REVERSED_CLIENT_ID"

References: Cordova plugin to login with Google Sign-In on iOS and Android

D.4) Facebook Login Setup - top

Go to your Facebook Developer, create a new project. Add Facebook Login product, then add platform for Android and iOS, enter your app package name for Android and iOS. Input your Valid OAuth Redirect URIs (get this from Firebase Authentication -> Facebook) in Facebook Login Settings. Dont forget to copy your APP ID, we need this when installing facebook native plugin in app.

Install
			sudo ionic cordova plugin rm cordova-plugin-facebook4; ionic cordova plugin add cordova-plugin-facebook4 --save --variable APP_ID="YOUR_FACEBOOK_APP_ID" --variable APP_NAME="YOUR_APP_NAME"
Generate Key Hash (for MAC)
			keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64
Generate Key Hash (for WINDOWS)
			keytool -exportcert -alias androiddebugkey -keystore %HOMEPATH%\.android\debug.keystore | openssl sha1 -binary | openssl base64

Copy your key hash into Facebook App Setting -> Basic -> Android.

References: Cordova plugin to login with Facebook Sign-In on iOS and Android

D.5) Phone Login Setup - top

Phone Authentication only works with Android / iOS real device. You can not use it in browser or simulator. To get it works in iOS, create an App IDS for your app, enable Push Notification. Then use the APNs auth key to generate the .p8 file and upload it to firebase. Dont forget to also enable Push Notication in Xcode.

References: Cordova plugin for Google Firebase

D.6) Run in Browser - top

Now, we have completed all of requirements to run our apps. First, we will run app on browser by run:

			cd authy
			ionic serve --lab
Ionstore on browser

Now, you app is on chrome browser and running well.
Note: All of hardware plugin will not work on browser.

D.7) Android SDK for Mac- top

In order to run this app on Android, you have to install Android SDK and some extras. Follow this step:

  1. Download Android Studio for your Mac OS X and install Download Android Studio for Mac
  2. After installation finished, open Android Studio & select Preferences Select Preferences on Android Studio
  3. Launch standalone SDK Manager Launch SDK Manager
  4. Install Tools, Android 6.0 (API 23) and some Extras as below Installing Android Platform

It may take times untill the installation finish. After finish, close SDK Manager.

D.8) Android SDK for Windows - top

In order to run this app on Android, you have to install Android SDK and some extras. Follow this step:

  1. Download Android SDK (not Android Studio) for your Windows and install Download Android Studio for Windows
  2. After installation finished, open SDK Manager Open SDK Manager
  3. Install Tools, Android 6.0 (API 23) and some Extras as below Installing Android Platform

It may take times untill the installation finish. After finish, close SDK Manager. Then you have to setting the environment variables, check the reference below.

D.9) Build and Run on Android - top

To build your project to Android platform, please make sure that you have completed the instructions above. After the installation complete, you can build the project using:

			cd authy
			ionic cordova build android

This process will produce apk file on your platforms/android.

Now, let’s start running & testing on real device. Follow this step:

  1. Connect USB cable on your Android device to computer (Windows only)
  2. Run the app on real device using: 
    					ionic cordova run android
  3. If you want to run Android on Mac, you can use android emulator or Genymotion
  4. Emulate the app using: 
    					ionic cordova emulate android

You will see the app running on your real device or android emulator.

D.10) Build and Run on iOS - top

To build your project to iOS platform, open your Terminal and type:

			cd authy
			ionic cordova build ios

The build process will produce ios folder in your platforms folder. Then, to run your app on emulator, please follow this step:

  1. Open authy/platforms/ios/authy.xcodeproj
  2. Double click authy.xcodeproj file, it will open Xcode
  3. Your can run your app by selecting iOS device or device emulator, then click play button
  4. You can also run the app using command line from Terminal, using 
    					ionic cordova emulate ios
  5. To emulate on specific iOS device (eq. iPhone 6s) 
    					ionic cordova emulate ios --target="iPhone-6s"

You will see the app running on iOS simulator.

I) References - top

To learn more about Ionic Framework, you can visit:

Ionic Getting started guide
ionicframework.com/getting-started

Ionic Documentation
ionicframework.com/docs

Ionic Community Forum
forum.ionicframework.com

ngCordova Documentation
http://ngcordova.com/docs

J) Support - top

When you have any issues related to Ionic, please don’t be hesitate to contact us using:

You can also visit: forum.ionicframework.com for more informations and any issues about Ionic Framework.

K) FAQs - top

1. How to edit the project files?

You can use below editors to edit project file on your Windows and Mac :

By downloading and installing it to your computer.

2. How to change the icon and splash screen?

To change Icon and Splash Screen, you can do it by following this step:
  1. Open your cmd or Terminal, then: 
    						cd authy
						ionic cordova resources

    Ionic Framework will create resources directory at the root of the project. This resources directory contains image file for icon and splash screen.

  2. Create your own icon by save an icon.png (1024px x 1024px) in resource directory. The icon images dimension should follow the Ionic Framework recommended icon file dimension. This icon template provide the recommended size icon files.
  3. Create your own splash screen by save a splash.png (2732px x 2732px) in resource directory. The splash screen images dimension should follow the Ionic Framework recommended splash screen file dimension. This splash screen template provide the recommended size splash screen files.
  4. Every time you change the icon or splash screen, you have to run ionic cordova resources. Ionic will will automatically generate the icon and splash for each screen size using the icon.png and splash.png you provided.

3. What are plugins version, Ionic and others?

Here are what versions we used for latest Authy:

  1. Authy - Ionic Firebase Social Authentication Full App for Android and iOS

  2. Authy - Ionic Firebase Social Authentication Full App for Android and iOS

L) Sources & Credits - top

Thanks for all of you that give me resources and inspirations.

M) Version History - top

Once again, thank you so much for purchasing Authy - Ionic Firebase Social Authentication Full App. As I said at the beginning, I'd be glad to help you if you have any questions relating to this app. No guarantees, but I'll do my best to assist. If you have a more general question relating to the app on CodeCanyon, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Ionic Premium

Go To Table of Contents