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]