SlideShare a Scribd company logo

Firebase Auth Tutorial

•
•
Bukhori Aqid
Bukhori Aqid

A simple how-to's on how to use Firebase Authentication Service using Android SDK, Facebook SDK & Firebase SDK.

1 of 25
Download to read offline
Firebase Auth 101 Authentication using Firebase SDK
+ + ++ github.com/aqidd Bukhori Muhammad Aqid
+ + ++ + + ++ Firebase Auth : Some Capabilities https://firebase.google.com/docs/auth/
+ + ++ + + ++ Firebase Auth : Key Capabilities https://firebase.google.com/docs/auth/ ● Firebase UI provides a drop-in auth solution that handles the UI flows for signing in users with email addresses and passwords, Google Sign-In, and Facebook Login. ● Email & Password Authentication ● Federated identity provider integration ● Custom Auth Integration Connect your app's existing sign-in system to the Firebase Authentication SDK and gain access to Firebase Realtime Database and other Firebase services. ● Anonymous Auth Use Firebase features that require authentication without requiring users to sign in first by creating temporary anonymous accounts. If the user later chooses to sign up, you can upgrade the anonymous account to a regular account, so the user can continue where they left off.
+ + ++ + + ++ Firebase Console : Create Project https://console.firebase.google.com
+ + ++ + + ++ Facebook Developer : Create Project https://developers.facebook.com
+ + ++ Firebase Console : Enable Auth https://console.firebase.google.com/
+ + ++ + + ++ 1. Create a Firebase project in the Firebase console, if you don't already have one. If you already have an existing Google project associated with your mobile app, click Import Google Project. Otherwise, click Create New Project. 2. Click Add Firebase to your Android app and follow the setup steps. If you're importing an existing Google project, this may happen automatically and you can just download the config file. 3. When prompted, enter your app's package name. It's important to enter the package name your app is using; this can only be set when you add an app to your Firebase project. 4. At the end, you'll download a google-services.json file. You can download this file again at any time. 5. If you haven't done so already, copy this into your project's module folder, typically app/. Integrate Firebase into your App https://firebase.google.com/docs/android/setup
+ + ++ + + ++ ● Add rules to your root-level build.gradle file, to include the google-services plugin ● Then, in your module Gradle file (usually the app/build.gradle), add the apply plugin line at the bottom of the file to enable the Gradle plugin Add Firebase SDK
+ + ++ + + ++ ● Declare the FirebaseAuth and AuthStateListener objects. ● Initialize the FirebaseAuth instance and the AuthStateListener method so you can track whenever the user signs in or out. Integrate Firebase Auth https://firebase.google.com/docs/auth/android/start/
+ + ++ + + ++ ● Attach the listener to your FirebaseAuth instance in the onStart() method and remove it on onStop(). You can also add the listener in onAttach() method & remove it on onDetach() if you’re using Fragment Integrate Firebase Auth (2) https://firebase.google.com/docs/auth/android/start/
+ + ++ + + ++ ● Create a new account by passing the new user's email address and password to createUserWithEmailAndPassword If the new account was created, the user is also signed in, and the AuthStateListener runs the onAuthStateChanged callback. In the callback, you can use the getCurrentUser method to get the user's account data. Registering a User https://firebase.google.com/docs/auth/android/password-auth
+ + ++ + + ++ ● When a user signs in to your app, pass the user's email address and password to signInWithEmailAndPassword If sign-in succeeded, the AuthStateListener runs the onAuthStateChanged callback. In the callback, you can use the getCurrentUser method to get the user's account data. Logging In a User https://firebase.google.com/docs/auth/android/password-auth
+ + ++ + + ++ ● When a user signs in to your app, pass the user's email address to sendPasswordReset If password reset succeeded, Firebase will send an email to your account for a password reset steps. Forgot Password
+ + ++ Integrate Facebook Login to your App Facebook Login
+ + ++ + + ++ 1. Add mavenCentral() to your Module-level /app/build.gradle before dependencies 2. Add the compile dependency with the latest version of the Facebook SDK in the build.gradle file compile 'com.facebook.android:facebook-android-sdk:4.+' 3. Build your project. Import com.facebook.FacebookSdk into your app. 4. Initialize Facebook SDK before you can use it. Add a call to FacebookSdk.sdkInitialize from onCreate in your Application class FacebookSdk.sdkInitialize(getApplicationContext()); AppEventsLogger.activateApp(this); 5. add your Facebook App ID to your project's strings file and update your Android manifest 6. Add a meta-data element to the application element <meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id"/> Integrate Facebook SDK into your App https://developers.facebook.com/docs/android/getting-started
+ + ++ + + ++ Set your Native Platform data Configure your Facebook App https://developers.facebook.com/docs/android/getting-started
+ + ++ + + ++ On OSX keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64 On Windows keytool -exportcert -alias androiddebugkey -keystore %HOMEPATH%.androiddebug.keystore | openssl sha1 -binary | openssl base64 On Android Studio : Getting your Key Hash Value https://developers.facebook.com/docs/android/getting-started
+ + ++ + + ++ Configure your Facebook Login Parameter Configure your Facebook App https://developers.facebook.com/docs/android/getting-started
+ + ++ + + ++ ● Create CallbackManager Instance ● Register CallbackManager onActivityResult() Using Facebook Login Button https://developers.facebook.com/docs/facebook-login/android/v2.2
+ + ++ + + ++ ● Add Facebook Login Button to your XML File ● Customize the properties of Login button and register CallbackManager Using Facebook Login Button (2) https://developers.facebook.com/docs/facebook-login/android/v2.2
+ + ++ + + ++ ● After a user successfully signs in, in the LoginButton's onSuccess callback method, get an access token for the signed-in user, exchange it for a Firebase credential, and authenticate with Firebase using the Firebase credential Integrate Facebook Login with Firebase https://firebase.google.com/docs/auth/android/facebook-login
+ + ++ Clone Sample Project at : https://github.com/aqidd/firebase-auth-sample
+ + ++ Clone Complete Project at : https://github.com/aqidd/firebase-auth-sample/tree/develop
Thank you. Let’s talk! www.flipbox.co.id 021 739 6426 • 0818 0725 2399 contact@flipbox.co.id + + ++

More Related Content

Firebase Auth Tutorial

  • 1. Firebase Auth 101 Authentication using Firebase SDK
  • 3. + + ++ + + ++ Firebase Auth : Some Capabilities https://firebase.google.com/docs/auth/
  • 4. + + ++ + + ++ Firebase Auth : Key Capabilities https://firebase.google.com/docs/auth/ ● Firebase UI provides a drop-in auth solution that handles the UI flows for signing in users with email addresses and passwords, Google Sign-In, and Facebook Login. ● Email & Password Authentication ● Federated identity provider integration ● Custom Auth Integration Connect your app's existing sign-in system to the Firebase Authentication SDK and gain access to Firebase Realtime Database and other Firebase services. ● Anonymous Auth Use Firebase features that require authentication without requiring users to sign in first by creating temporary anonymous accounts. If the user later chooses to sign up, you can upgrade the anonymous account to a regular account, so the user can continue where they left off.
  • 5. + + ++ + + ++ Firebase Console : Create Project https://console.firebase.google.com
  • 6. + + ++ + + ++ Facebook Developer : Create Project https://developers.facebook.com
  • 7. + + ++ Firebase Console : Enable Auth https://console.firebase.google.com/
  • 8. + + ++ + + ++ 1. Create a Firebase project in the Firebase console, if you don't already have one. If you already have an existing Google project associated with your mobile app, click Import Google Project. Otherwise, click Create New Project. 2. Click Add Firebase to your Android app and follow the setup steps. If you're importing an existing Google project, this may happen automatically and you can just download the config file. 3. When prompted, enter your app's package name. It's important to enter the package name your app is using; this can only be set when you add an app to your Firebase project. 4. At the end, you'll download a google-services.json file. You can download this file again at any time. 5. If you haven't done so already, copy this into your project's module folder, typically app/. Integrate Firebase into your App https://firebase.google.com/docs/android/setup
  • 9. + + ++ + + ++ ● Add rules to your root-level build.gradle file, to include the google-services plugin ● Then, in your module Gradle file (usually the app/build.gradle), add the apply plugin line at the bottom of the file to enable the Gradle plugin Add Firebase SDK
  • 10. + + ++ + + ++ ● Declare the FirebaseAuth and AuthStateListener objects. ● Initialize the FirebaseAuth instance and the AuthStateListener method so you can track whenever the user signs in or out. Integrate Firebase Auth https://firebase.google.com/docs/auth/android/start/
  • 11. + + ++ + + ++ ● Attach the listener to your FirebaseAuth instance in the onStart() method and remove it on onStop(). You can also add the listener in onAttach() method & remove it on onDetach() if you’re using Fragment Integrate Firebase Auth (2) https://firebase.google.com/docs/auth/android/start/
  • 12. + + ++ + + ++ ● Create a new account by passing the new user's email address and password to createUserWithEmailAndPassword If the new account was created, the user is also signed in, and the AuthStateListener runs the onAuthStateChanged callback. In the callback, you can use the getCurrentUser method to get the user's account data. Registering a User https://firebase.google.com/docs/auth/android/password-auth
  • 13. + + ++ + + ++ ● When a user signs in to your app, pass the user's email address and password to signInWithEmailAndPassword If sign-in succeeded, the AuthStateListener runs the onAuthStateChanged callback. In the callback, you can use the getCurrentUser method to get the user's account data. Logging In a User https://firebase.google.com/docs/auth/android/password-auth
  • 14. + + ++ + + ++ ● When a user signs in to your app, pass the user's email address to sendPasswordReset If password reset succeeded, Firebase will send an email to your account for a password reset steps. Forgot Password
  • 15. + + ++ Integrate Facebook Login to your App Facebook Login
  • 16. + + ++ + + ++ 1. Add mavenCentral() to your Module-level /app/build.gradle before dependencies 2. Add the compile dependency with the latest version of the Facebook SDK in the build.gradle file compile 'com.facebook.android:facebook-android-sdk:4.+' 3. Build your project. Import com.facebook.FacebookSdk into your app. 4. Initialize Facebook SDK before you can use it. Add a call to FacebookSdk.sdkInitialize from onCreate in your Application class FacebookSdk.sdkInitialize(getApplicationContext()); AppEventsLogger.activateApp(this); 5. add your Facebook App ID to your project's strings file and update your Android manifest 6. Add a meta-data element to the application element <meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id"/> Integrate Facebook SDK into your App https://developers.facebook.com/docs/android/getting-started
  • 17. + + ++ + + ++ Set your Native Platform data Configure your Facebook App https://developers.facebook.com/docs/android/getting-started
  • 18. + + ++ + + ++ On OSX keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64 On Windows keytool -exportcert -alias androiddebugkey -keystore %HOMEPATH%.androiddebug.keystore | openssl sha1 -binary | openssl base64 On Android Studio : Getting your Key Hash Value https://developers.facebook.com/docs/android/getting-started
  • 19. + + ++ + + ++ Configure your Facebook Login Parameter Configure your Facebook App https://developers.facebook.com/docs/android/getting-started
  • 20. + + ++ + + ++ ● Create CallbackManager Instance ● Register CallbackManager onActivityResult() Using Facebook Login Button https://developers.facebook.com/docs/facebook-login/android/v2.2
  • 21. + + ++ + + ++ ● Add Facebook Login Button to your XML File ● Customize the properties of Login button and register CallbackManager Using Facebook Login Button (2) https://developers.facebook.com/docs/facebook-login/android/v2.2
  • 22. + + ++ + + ++ ● After a user successfully signs in, in the LoginButton's onSuccess callback method, get an access token for the signed-in user, exchange it for a Firebase credential, and authenticate with Firebase using the Firebase credential Integrate Facebook Login with Firebase https://firebase.google.com/docs/auth/android/facebook-login
  • 23. + + ++ Clone Sample Project at : https://github.com/aqidd/firebase-auth-sample
  • 24. + + ++ Clone Complete Project at : https://github.com/aqidd/firebase-auth-sample/tree/develop
  • 25. Thank you. Let’s talk! www.flipbox.co.id 021 739 6426 • 0818 0725 2399 contact@flipbox.co.id + + ++