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!
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
Here is what you need:
When you extract the zip package, you will find this:
Please follow these step to get the app work. You can also watch our video tutorial below to get started.
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.
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.
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.
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"
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
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
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.
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"
keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64
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
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
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
Now, you app is on chrome browser and running well.
Note: All of hardware plugin will not work on browser.
In order to run this app on Android, you have to install Android SDK and some extras. Follow this step:
It may take times untill the installation finish. After finish, close SDK Manager.
In order to run this app on Android, you have to install Android SDK and some extras. Follow this step:
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.
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:
ionic cordova run android
ionic cordova emulate android
You will see the app running on your real device or android emulator.
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:
ionic cordova emulate ios
ionic cordova emulate ios --target="iPhone-6s"
You will see the app running on iOS simulator.
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
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.
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: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.
3. What are plugins version, Ionic and others?
Here are what versions we used for latest Authy:Thanks for all of you that give me resources and inspirations.
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