SPEAKER: Welcome
to "Who's There?"
a show about Cloud Identity.
[MUSIC PLAYING]
In the last episode
of "Who's There?",
I talked about why Identity
Platform is awesome
and how to enable it
in your GCP project.
Today I'm showing you how to
integrate Identity Platform
into your JavaScript web app.
If you haven't enabled
Identity Platform yet,
I recommend you check out the
last episode of "Who's There?"
before proceeding.
You also need a web page
that uses JavaScript.
And if web development
doesn't happen
to be your jam, then check
out the Getting Started
videos for iOS and
Android, both linked below.
All right.
With the prerequisites out of
the way, let's get started.
In the Cloud console
for my project,
I selected the
Identity Platform tab.
I previously added email
and password authentication.
If you haven't added this
yet, click Add a Provider
and select Email Password.
There are lots of other
providers to explore,
but today, I'm just
sticking with this one.
On this provider's
page, you see a link
in the upper right for
Application Setup Details.
This pops up a window with brief
getting started information.
You see "Copy and
paste the snippet below
at the bottom of your HTML,
before other script tags.
Learn more."
Go ahead and click Learn More.
This takes you to a guide on
getting started with Firebase
authentication on websites.
If you've used Firebase
before, you probably
have some experience
with this documentation.
But it's entirely possible
you've never even heard
of Firebase, let alone used it.
So let's talk about
Firebase for a moment.
Firebase is a suite of products
to help you build your app
and grow your user base.
It includes SDKs for
Objective C and Swift for iOS,
Java in Kotlin for Android,
JavaScript for web,
as well as several web
frameworks, like Angular.
There are game-specific
SDKs, too, for Unity and C++,
and so much more.
I could make a whole series
of videos just on Firebase,
but fortunately, the Firebase
team has already done that.
If you're interested
in finding out more,
check out the documentation and
the Firebase YouTube channel,
both linked below.
So in many ways, Firebase
is the perfect complement
to Google Cloud.
And very broadly speaking,
Google Cloud products focus
on server-side solutions, like
App Engine, Compute Engine,
Cloud Functions, Kubernetes
Engine, and Cloud Run.
And Firebase products focus
on client-side solutions,
like Client Authentication,
Cloud Messaging, Cloud Storage
for Firebase, and so on.
Now, I meant that
it's challenging
to pin down the relationship
between Google Cloud
and Firebase.
My oversimplified explanation
is that Firebase is a way
to access some Google Cloud
Platform products from a client
application.
Specifically for
Identity Platform,
this explanation works well.
The Firebase Auth
SDKs enable you
to access Identity
Platform functionality
from your client app.
So with that in
mind, let's head back
to that Firebase documentation.
Add the script as
instructed in the configure
your application instructions
in the Cloud console.
And that's it.
Now you can use
the Firebase Auth
SDK to sign up, log
in, log out, and get
user info about an
identity platform user.
Identity Platform gives you
access to many different login
providers, including
federated identity providers,
like Google,
Facebook, and Twitter.
And you can enable several
login methods for a single app,
allowing your users
to authenticate
the way that they prefer.
Some of these login methods
may require additional steps,
which are listed in the console
when you enable that login
method.
See the documentation
below for information
on how to implement
other login providers.
For now, let's get back to
implementing email and password
login.
In the Cloud console,
create a fake user
with a test email
and test password.
Of course, you can also create
a new user from the client,
but this here is a good way to
get up and running right away.
See how to create
a user in your web
app following the link below.
Sign in your fake user with
the Firebase Auth method
signInWithEmailAndPassword.
This function returns a promise
that when resolved is a user
credential object.
If there is no error,
you can do whatever
you need to do with the user.
Right now, just
log the user's UID
or display the UID in a div.
Include a catch block
to handle any errors.
So it's clear that my example
thus far is not a complete auth
solution.
You need a way for users
to create user accounts,
handle password
resets, and log out.
And each of these functions
needs some UI development
as well.
If you prefer, you can write all
of this functionality yourself
using the Firebase
guides as a reference.
But you also have the option
to use the Firebase Auth UI
module.
This open source UI was created
by auth specialists at Google.
It includes all of
the views you would
need to implement for account
creation, login, logout,
and password reset
functionality.
You can incorporate auth UI
in just a few lines of code.
Personally, whenever
I start a new project,
I use Firebase UI
first so I can focus
on the key features of my app
while still protecting data
through authentication.
Whether you make your own
UI or use Firebase UI,
you will very likely need
to know the auth status
before performing
many app actions.
For example, you're
going to want
to check if there is a user
logged in before trying
to write to a database.
That's where getting the
current user comes into play.
Let's look at how to
implement this functionality.
For each of your
app's pages that
need information about
the signed-in user,
attach an observer to the
global authentication object.
This observer gets called
whenever the user sign-in
state changes.
Attach the observer using the
onAuthStateChanged method.
When a user
successfully signs in,
you can get information about
the user in the observer.
Then add the function
that logs out
so you can see the
state change listener
closure be triggered again.
Of course, it's really
unusual to log in
only to immediately
log out, but this
is purely for the
sake of example
so you can see state change
listener get triggered.
When you run the app,
check the console.
The console logs show that
the user is logged in,
and then they are logged out.
Congratulations.
You just added identity
platform to a web app.
Ready to see what else
identity platform can do?
Check out the Firebase Auth web
guides, auth quick start code,
and Firebase YouTube channel.
And be sure to subscribe to the
Google Cloud Platform channel
so you can be the first to
know about new videos in the
"Who's There?"
series.
Thanks for watching, and we'll
see you on a future episode.
[MUSIC PLAYING]
