Scribd
Upload
15 views

week12

Uploaded by

eshaasif005
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
15 views

week12

Uploaded by

eshaasif005
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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