Scribd
Upload
15 views

week12

Uploaded by

eshaasif005
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
15 views

week12

Uploaded by

eshaasif005
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 26

Mobile Application

Development
BY
AATIQA BINT E GHAZALI
• FIREBASE AUTHENTICATION
Creating account on firebase
• Login to www.firebase.com
• Enter into console
• Create a new project
• For now, disable google analytics
• Choose a name
• You are done
Integrate firebase into your app
• Choose web for now
• Register your app for now
Register app
• Register your app
• install firebase in your app
Configuration/firebase sdk
• Copy the configuration from website and paste it in the project
• Click next
• Click complete
Firebase authentication
• Go to firebase authentication and click on get started
• For this usecase select authentication using email and password
• Enable it
• Click save
Configurations in code
• Import necessary libraries

• Initialize the firebase first


• Where firebaseConfig contains credentials that you have copied while
creating app
Adding Navigation
• Add react-navigation to navigate between login and signout screens
smoothly
• You can use the stack navigator
Designing the layout
• Design a simple login form which will contain input fields of email and
password
• Two buttons to either register or login
Adding functionality
• Test the buttons
• Create two states for emails and password

• Get the text entered into input fields using value and onChangeText
fields
Debugging
• Test side by side to get what you are coding.
• On button click get the text that users entered into text fields
Important firebase auth functions
• Its important to import these functions from firebase to get
authentication done
createUserWithEmailAndPassword
• createUserWithEmailAndPassword: used to create a new user in
firebase.
• It will take 3 arguments (auth , email , password)
• Where auth is the variable imported from firebase file initially
imported from getAuth
• Email and password are user entered records
• It will alert an error on duplicate entry
• We will call this function inside the function attached with Register
button
signInWithEmailAndPassword
• Use to sign-in a user with already registered
• Alert an error on wrong entry
• It will take 3 arguments (auth , email , password)
• Where auth is the variable imported from firebase file initially
imported from getAuth
• Email and password are user entered records
• We will call this function inside the function attached with Login
button
What is user??
• In Firebase Authentication, the user object represents the currently
authenticated user.
• This object contains various properties and methods that give you
information about the user’s identity and allow you to manage their
authentication details.
• The user object is returned by Firebase methods such as
onAuthStateChanged, signInWithEmailAndPassword, and
createUserWithEmailAndPassword
onAuthStateChanged

• The onAuthStateChanged function is an event listener provided by


Firebase Authentication
• helps track changes to the authentication state of the user.
• It’s triggered whenever there is a change in the user's sign-in status
• (i.e., when a user logs in, logs out, or the app starts and Firebase
checks for an existing session).
How onAuthStateChanged Works?
• onAuthStateChanged starts listening for changes as soon as you call it.
• We will be calling it in useEffect hook case empty dependency array
• When the app first loads, onAuthStateChanged checks if there is an
active user session.
• If the user was logged in during a previous session and hasn’t logged
out, it returns the current user, allowing you to skip the login screen
and directly navigate to the main app.
Some frontend
basics :KeyboardAvoidingView
• This component will automatically adjust its height, position, or
bottom padding based on the keyboard height to remain visible while
the virtual keyboard is displayed.
• import {KeyboardAvoidingView } from 'react-native';
Making the Home screen
• Since we are just signing in with email and password we can display
the email on home page with which the user is logged in
• Make a button of signout and upon button press call a method to
signout user
End notes
• You can modify the signout and signin properties and fields in API
once you will create them in Express js or Django or Laravel ,
springboot etc
• Firebase options are limited as it is ready made backend
• We can just use built in functionalities

You might also like