Learn how to login Firebase users with nothing by an email address using the new passwordless email-link authentication strategy. https://angularfirebase.com/lessons/using-passwordless-signup-with-firebase-on-the-web/

Let's Chat: https://goo.gl/6eYoxF
Firebase Docs: https://firebase.google.com/docs/auth/web/email-link-auth
2024-02-04T07:41:17.959Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
2bc58423-8a97-417e-915e-58f0c08a1260
6070a4f525bb9e61191d3eb4d3bb55ab493cbf2752ddacf43825bc5a28188a35
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Over the past few years, you may have noticed certain apps transitioning from email password authentication to just email link authentication.
And there's 2 main benefits to doing this.
1st, your users don't have to remember a password.
And 2, it provides a frictionless sign up process that makes it more likely for you to onboard new users.
One app that does this is Open Collective, and the possibility just became available to Firebase developers a couple days ago.
And I wanted to send a thank you out to all Angular Firebase Pro members because your subscription allows me to donate to other open source projects through Open Collective, and I'm very grateful to be able to do that.
In today's video, we're going to use Firebase to build our own passwordless auth system, which will take a user's email, send them out an email link that will authenticate them into our Firebase app.
I'm starting with a brand new Angular app and making sure that it has a router, then generating a new component called passwordless auth.
From there, you'll need a Firebase project with AngularFire 2 installed.
And if you're starting from an existing project, make sure to update the Firebase SDK to the latest version.
Then go into the Firebase console for your project and enable the email link method under the email password settings.
Now quickly taking a look at the app module, you should have the AngularFire module as well as AngularFire auth in here with your Firebase web credentials.
Then initialize the app down here in the import section.
From there, we'll jump over to the router and we'll route our component to the login path.
What's going to happen is the user will initially land on this component, they'll get their email link, and then they'll come back to this component with a special auth code that we can use to log them in.
Depending on your requirements, you may wanna break this down into 2 separate components.
1 to get the actual link and then another one that they're redirected to to actually sign in.
For the sake of simplicity here, we'll just do everything in a single component.
The end result should look like this.
The user enters their email address.
We notify them that we sent the email.
They go into their inbox, and then they have a link that will redirect them back to this component.
Firebase includes a special code in the URL, and they also need to return with the same email address that they tried to sign in with for security reasons.
And the way we keep track of that between redirects is by saving the email in local storage.
If the user clicks the link and we don't have the email address in local storage, will need to prompt them for it again.
That's most likely to happen if they request the link on one device and then try to sign in on a different device.
In progressive web apps, we can handle this with just a simple browser prompt.
And if the user tries to enter an email that doesn't match, it should throw an error.
So we'll build a component that has a way to display those errors.
Then if we try to redirect the link again and this time enter the correct email address, we should get authenticated successfully.
We can start this implementation out in the component typescript.
We're going to need AngularFireAuth as well as the Angular router.
Then we'll jump down here and define a few properties to manage the state of this component.
First, we have the user which is an observable.
If it's null, we know the user is not logged in.
If it's an object, we know the user is logged in.
We have an email string which represents the form input.
Then we have a boolean that will flip to true once the email has been sent, and lastly, a string that we can use to display any error messages.
From there, we'll inject AngularFire auth and the router and the constructor.
Then we'll define our user as the AngularFire auth state observable.
Then we need to get the full URL in the browser, which we can do with the router by calling router URL.
Then we're going to write a method that looks to this URL and determines if it's a valid Firebase email link URL.
And if so, it will go ahead and log in the user.
But first, we need to have the user request the email link in the first place.
And to do that, we need to define some action code settings.
In this case, I'm just saying the redirect URL is going to be local host 4200 to our login component.
Then because we're in an async function and also we're going to be interacting with the DOM.
I'm going to wrap everything in a try catch block.
To save the email address in local storage, we need to interact with the DOM window, and that could fail with things like server side rendering, so we wrap it in try catch to make sure that that's a safe operation.
This method here will happen when the user clicks on the login button, and we're going to await the promise send sign in link to email, which resolves once that email has been sent.
We just need to pass it the email string and the action code settings that we defined earlier.
After that promise resolves, we need to set the email address in local storage because the user will be redirected to a new instance of our Angular app and it will have no memory of the email address that was used.
And then lastly, we'll flip our email sent variable to true.
And if anything fails in here, we'll display it in the error message.
So that handles the first part of the process.
That sends the email out to the user.
When they redirect, we wanna confirm that it's a valid link and sign them into our app.
The Firebase SDK can parse the link for us, which we do by calling is sign in with email link and passing it the URL that we get with the Angular router.
If it is a valid link, then we need to check that the user has the same email address that they were redirected from.
That should be the email that's in local storage, which we can call by saying get item email for sign in.
But if not, we can just use a browser prompt to have the user reenter their email address after the redirect.
At this point, we should have the 2 pieces we need to sign the user in which is the email address and the URL.
So we'll go ahead and pass those items to the sign in with email link method on the Firebase SDK, and that's a promise that should resolve with the logged in user.
And lastly, we'll clean things up by removing the email for sign in from local storage.
Now we can put this all together in the HTML.
The first thing I'll do is show a success message if the user is already logged in.
Because our user is an observable, we can just unwrap it with the async pipe.
Otherwise, we're going to display this login template.
The role of the login template is to 1, collect the user's email address and 2, give them a button to click to send the email out.
To collect the email address, we can just add the NG model directive here and then bind it to the email property in our component type script.
Then just below that, I'll add a button that's disabled if the email has already been sent.
And when clicked, it will fire off the send email link method to the email address entered in the form.
That's the main thing we need there, but I'll also go ahead and add another div here that will show a success message when the email has been sent or an error message if there's any problem with the login process.
And that's basically all there is to it.
You should now have a working passwordless auth system in your Firebase app.
If this video helped you, please like and subscribe.
And if you want all kinds of other exclusive content related to Angular Firebase development, consider becoming a pro member at angularfirebase.com.
You'll get a free copy of my book as well as access to my full length courses covering Ionic and Stripe payments.
Thanks for watching, and I'll see you soon.

Speaker 0: Over the past few years, you may have noticed certain apps transitioning from email password authentication to just email link authentication. And there's 2 main benefits to doing this. 1st, your users don't have to remember a password. And 2, it provides a frictionless sign up process that makes it more likely for you to onboard new users. One app that does this is Open Collective, and the possibility just became available to Firebase developers a couple days ago.

And I wanted to send a thank you out to all Angular Firebase Pro members because your subscription allows me to donate to other open source projects through Open Collective, and I'm very grateful to be able to do that. In today's video, we're going to use Firebase to build our own passwordless auth system, which will take a user's email, send them out an email link that will authenticate them into our Firebase app. I'm starting with a brand new Angular app and making sure that it has a router, then generating a new component called passwordless auth. From there, you'll need a Firebase project with AngularFire 2 installed. And if you're starting from an existing project, make sure to update the Firebase SDK to the latest version.

Then go into the Firebase console for your project and enable the email link method under the email password settings. Now quickly taking a look at the app module, you should have the AngularFire module as well as AngularFire auth in here with your Firebase web credentials. Then initialize the app down here in the import section. From there, we'll jump over to the router and we'll route our component to the login path. What's going to happen is the user will initially land on this component, they'll get their email link, and then they'll come back to this component with a special auth code that we can use to log them in.

Depending on your requirements, you may wanna break this down into 2 separate components. 1 to get the actual link and then another one that they're redirected to to actually sign in. For the sake of simplicity here, we'll just do everything in a single component. The end result should look like this. The user enters their email address.

We notify them that we sent the email. They go into their inbox, and then they have a link that will redirect them back to this component. Firebase includes a special code in the URL, and they also need to return with the same email address that they tried to sign in with for security reasons. And the way we keep track of that between redirects is by saving the email in local storage. If the user clicks the link and we don't have the email address in local storage, will need to prompt them for it again.

That's most likely to happen if they request the link on one device and then try to sign in on a different device. In progressive web apps, we can handle this with just a simple browser prompt. And if the user tries to enter an email that doesn't match, it should throw an error. So we'll build a component that has a way to display those errors. Then if we try to redirect the link again and this time enter the correct email address, we should get authenticated successfully.

We can start this implementation out in the component typescript. We're going to need AngularFireAuth as well as the Angular router. Then we'll jump down here and define a few properties to manage the state of this component. First, we have the user which is an observable. If it's null, we know the user is not logged in.

If it's an object, we know the user is logged in. We have an email string which represents the form input. Then we have a boolean that will flip to true once the email has been sent, and lastly, a string that we can use to display any error messages. From there, we'll inject AngularFire auth and the router and the constructor. Then we'll define our user as the AngularFire auth state observable.

Then we need to get the full URL in the browser, which we can do with the router by calling router URL. Then we're going to write a method that looks to this URL and determines if it's a valid Firebase email link URL. And if so, it will go ahead and log in the user. But first, we need to have the user request the email link in the first place. And to do that, we need to define some action code settings.

In this case, I'm just saying the redirect URL is going to be local host 4200 to our login component. Then because we're in an async function and also we're going to be interacting with the DOM. I'm going to wrap everything in a try catch block. To save the email address in local storage, we need to interact with the DOM window, and that could fail with things like server side rendering, so we wrap it in try catch to make sure that that's a safe operation. This method here will happen when the user clicks on the login button, and we're going to await the promise send sign in link to email, which resolves once that email has been sent.

We just need to pass it the email string and the action code settings that we defined earlier. After that promise resolves, we need to set the email address in local storage because the user will be redirected to a new instance of our Angular app and it will have no memory of the email address that was used. And then lastly, we'll flip our email sent variable to true. And if anything fails in here, we'll display it in the error message. So that handles the first part of the process.

That sends the email out to the user. When they redirect, we wanna confirm that it's a valid link and sign them into our app. The Firebase SDK can parse the link for us, which we do by calling is sign in with email link and passing it the URL that we get with the Angular router. If it is a valid link, then we need to check that the user has the same email address that they were redirected from. That should be the email that's in local storage, which we can call by saying get item email for sign in.

But if not, we can just use a browser prompt to have the user reenter their email address after the redirect. At this point, we should have the 2 pieces we need to sign the user in which is the email address and the URL. So we'll go ahead and pass those items to the sign in with email link method on the Firebase SDK, and that's a promise that should resolve with the logged in user. And lastly, we'll clean things up by removing the email for sign in from local storage. Now we can put this all together in the HTML.

The first thing I'll do is show a success message if the user is already logged in. Because our user is an observable, we can just unwrap it with the async pipe. Otherwise, we're going to display this login template. The role of the login template is to 1, collect the user's email address and 2, give them a button to click to send the email out. To collect the email address, we can just add the NG model directive here and then bind it to the email property in our component type script.

Then just below that, I'll add a button that's disabled if the email has already been sent. And when clicked, it will fire off the send email link method to the email address entered in the form. That's the main thing we need there, but I'll also go ahead and add another div here that will show a success message when the email has been sent or an error message if there's any problem with the login process. And that's basically all there is to it. You should now have a working passwordless auth system in your Firebase app.

If this video helped you, please like and subscribe. And if you want all kinds of other exclusive content related to Angular Firebase development, consider becoming a pro member at angularfirebase.com. You'll get a free copy of my book as well as access to my full length courses covering Ionic and Stripe payments. Thanks for watching, and I'll see you soon.
Over the past few years, you may have noticed certain apps transitioning from email password authentication to just email link authentication. And there's 2 main benefits to doing this. 1st, your users don't have to remember a password. And 2, it provides a frictionless sign up process that makes it more likely for you to onboard new users.
email
One app that does this is Open Collective, and the possibility just became available to Firebase developers a couple days ago. And I wanted to send a thank you out to all Angular Firebase Pro members because your subscription allows me to donate to other open source projects through Open Collective, and I'm very grateful to be able to do that. In today's video, we're going to use Firebase to build our own passwordless auth system, which will take a user's email, send them out an email link that will authenticate them into our Firebase app. I'm starting with a brand new Angular app and making sure that it has a router, then generating a new component called passwordless auth. From there, you'll need a Firebase project with AngularFire 2 installed. And if you're starting from an existing project, make sure to update the Firebase SDK to the latest version. Then go into the Firebase console for your project and enable the email link method under the email password settings. Now quickly taking a look at the app module, you should have the AngularFire module as well as AngularFire auth in here with your Firebase web credentials. Then initialize the app down here in the import section. From there, we'll jump over to the router and we'll route our component to the login path. What's going to happen is the user will initially land on this component, they'll get their email link, and then they'll come back to this component with a special auth code that we can use to log them in. Depending on your requirements, you may wanna break this down into 2 separate components. 1 to get the actual link and then another one that they're redirected to to actually sign in.
For the sake of simplicity here, we'll just do everything in a single component. The end result should look like this. The user enters their email address. We notify them that we sent the email. They go into their inbox, and then they have a link that will redirect them back to this component.
email
Firebase includes a special code in the URL, and they also need to return with the same email address that they tried to sign in with for security reasons. And the way we keep track of that between redirects is by saving the email in local storage. If the user clicks the link and we don't have the email address in local storage, will need to prompt them for it again.
That's most likely to happen if they request the link on one device and then try to sign in on a different device. In progressive web apps, we can handle this with just a simple browser prompt. And if the user tries to enter an email that doesn't match, it should throw an error. So we'll build a component that has a way to display those errors. Then if we try to redirect the link again and this time enter the correct email address, we should get authenticated successfully.
email
internet
We can start this implementation out in the component typescript. We're going to need AngularFireAuth as well as the Angular router. Then we'll jump down here and define a few properties to manage the state of this component. First, we have the user which is an observable. If it's null, we know the user is not logged in. If it's an object, we know the user is logged in. We have an email string which represents the form input. Then we have a boolean that will flip to true once the email has been sent, and lastly, a string that we can use to display any error messages. From there, we'll inject AngularFire auth and the router and the constructor. Then we'll define our user as the AngularFire auth state observable. Then we need to get the full URL in the browser, which we can do with the router by calling router URL. Then we're going to write a method that looks to this URL and determines if it's a valid Firebase email link URL. And if so, it will go ahead and log in the user. But first, we need to have the user request the email link in the first place. And to do that, we need to define some action code settings. In this case, I'm just saying the redirect URL is going to be local host 4200 to our login component. Then because we're in an async function and also we're going to be interacting with the DOM. I'm going to wrap everything in a try catch block. To save the email address in local storage, we need to interact with the DOM window, and that could fail with things like server side rendering, so we wrap it in try catch to make sure that that's a safe operation.
This method here will happen when the user clicks on the login button, and we're going to await the promise send sign in link to email, which resolves once that email has been sent. We just need to pass it the email string and the action code settings that we defined earlier. After that promise resolves, we need to set the email address in local storage because the user will be redirected to a new instance of our Angular app and it will have no memory of the email address that was used. And then lastly, we'll flip our email sent variable to true. And if anything fails in here, we'll display it in the error message. So that handles the first part of the process. That sends the email out to the user. When they redirect, we wanna confirm that it's a valid link and sign them into our app.
email
The Firebase SDK can parse the link for us, which we do by calling is sign in with email link and passing it the URL that we get with the Angular router.
If it is a valid link, then we need to check that the user has the same email address that they were redirected from. That should be the email that's in local storage, which we can call by saying get item email for sign in. But if not, we can just use a browser prompt to have the user reenter their email address after the redirect. At this point, we should have the 2 pieces we need to sign the user in which is the email address and the URL. So we'll go ahead and pass those items to the sign in with email link method on the Firebase SDK, and that's a promise that should resolve with the logged in user. And lastly, we'll clean things up by removing the email for sign in from local storage. Now we can put this all together in the HTML.
email
The first thing I'll do is show a success message if the user is already logged in. Because our user is an observable, we can just unwrap it with the async pipe. Otherwise, we're going to display this login template. The role of the login template is to 1, collect the user's email address and 2, give them a button to click to send the email out.
To collect the email address, we can just add the NG model directive here and then bind it to the email property in our component type script. Then just below that, I'll add a button that's disabled if the email has already been sent. And when clicked, it will fire off the send email link method to the email address entered in the form. That's the main thing we need there, but I'll also go ahead and add another div here that will show a success message when the email has been sent or an error message if there's any problem with the login process. And that's basically all there is to it. You should now have a working passwordless auth system in your Firebase app.
email
If this video helped you, please like and subscribe. And if you want all kinds of other exclusive content related to Angular Firebase development, consider becoming a pro member at angularfirebase.com. You'll get a free copy of my book as well as access to my full length courses covering Ionic and Stripe payments.
Thanks for watching, and I'll see you soon.
Over the past few years, you may have noticed certain apps transitioning from email password authentication to just email link authentication. And there's 2 main benefits to doing this. 1st, your users don't have to remember a password. And 2, it provides a frictionless sign up process that makes it more likely for you to onboard new users. One app that does this is Open Collective, and the possibility just became available to Firebase developers a couple days ago. And I wanted to send a thank you out to all Angular Firebase Pro members because your subscription allows me to donate to other open source projects through Open Collective, and I'm very grateful to be able to do that. In today's video, we're going to use Firebase to build our own passwordless auth system, which will take a user's email, send them out an email link that will authenticate them into our Firebase app. I'm starting with a brand new Angular app and making sure that it has a router, then generating a new component called passwordless auth. From there, you'll need a Firebase project with AngularFire 2 installed. And if you're starting from an existing project, make sure to update the Firebase SDK to the latest version. Then go into the Firebase console for your project and enable the email link method under the email password settings. Now quickly taking a look at the app module, you should have the AngularFire module as well as AngularFire auth in here with your Firebase web credentials. Then initialize the app down here in the import section. From there, we'll jump over to the router and we'll route our component to the login path. What's going to happen is the user will initially land on this component, they'll get their email link, and then they'll come back to this component with a special auth code that we can use to log them in. Depending on your requirements, you may wanna break this down into 2 separate components. 1 to get the actual link and then another one that they're redirected to to actually sign in. For the sake of simplicity here, we'll just do everything in a single component. The end result should look like this. The user enters their email address. We notify them that we sent the email. They go into their inbox, and then they have a link that will redirect them back to this component. Firebase includes a special code in the URL, and they also need to return with the same email address that they tried to sign in with for security reasons. And the way we keep track of that between redirects is by saving the email in local storage. If the user clicks the link and we don't have the email address in local storage, will need to prompt them for it again. That's most likely to happen if they request the link on one device and then try to sign in on a different device. In progressive web apps, we can handle this with just a simple browser prompt. And if the user tries to enter an email that doesn't match, it should throw an error. So we'll build a component that has a way to display those errors. Then if we try to redirect the link again and this time enter the correct email address, we should get authenticated successfully. We can start this implementation out in the component typescript. We're going to need AngularFireAuth as well as the Angular router. Then we'll jump down here and define a few properties to manage the state of this component. First, we have the user which is an observable. If it's null, we know the user is not logged in. If it's an object, we know the user is logged in. We have an email string which represents the form input. Then we have a boolean that will flip to true once the email has been sent, and lastly, a string that we can use to display any error messages. From there, we'll inject AngularFire auth and the router and the constructor. Then we'll define our user as the AngularFire auth state observable. Then we need to get the full URL in the browser, which we can do with the router by calling router URL. Then we're going to write a method that looks to this URL and determines if it's a valid Firebase email link URL. And if so, it will go ahead and log in the user. But first, we need to have the user request the email link in the first place. And to do that, we need to define some action code settings. In this case, I'm just saying the redirect URL is going to be local host 4200 to our login component. Then because we're in an async function and also we're going to be interacting with the DOM. I'm going to wrap everything in a try catch block. To save the email address in local storage, we need to interact with the DOM window, and that could fail with things like server side rendering, so we wrap it in try catch to make sure that that's a safe operation. This method here will happen when the user clicks on the login button, and we're going to await the promise send sign in link to email, which resolves once that email has been sent. We just need to pass it the email string and the action code settings that we defined earlier. After that promise resolves, we need to set the email address in local storage because the user will be redirected to a new instance of our Angular app and it will have no memory of the email address that was used. And then lastly, we'll flip our email sent variable to true. And if anything fails in here, we'll display it in the error message. So that handles the first part of the process. That sends the email out to the user. When they redirect, we wanna confirm that it's a valid link and sign them into our app. The Firebase SDK can parse the link for us, which we do by calling is sign in with email link and passing it the URL that we get with the Angular router. If it is a valid link, then we need to check that the user has the same email address that they were redirected from. That should be the email that's in local storage, which we can call by saying get item email for sign in. But if not, we can just use a browser prompt to have the user reenter their email address after the redirect. At this point, we should have the 2 pieces we need to sign the user in which is the email address and the URL. So we'll go ahead and pass those items to the sign in with email link method on the Firebase SDK, and that's a promise that should resolve with the logged in user. And lastly, we'll clean things up by removing the email for sign in from local storage. Now we can put this all together in the HTML. The first thing I'll do is show a success message if the user is already logged in. Because our user is an observable, we can just unwrap it with the async pipe. Otherwise, we're going to display this login template. The role of the login template is to 1, collect the user's email address and 2, give them a button to click to send the email out. To collect the email address, we can just add the NG model directive here and then bind it to the email property in our component type script. Then just below that, I'll add a button that's disabled if the email has already been sent. And when clicked, it will fire off the send email link method to the email address entered in the form. That's the main thing we need there, but I'll also go ahead and add another div here that will show a success message when the email has been sent or an error message if there's any problem with the login process. And that's basically all there is to it. You should now have a working passwordless auth system in your Firebase app. If this video helped you, please like and subscribe. And if you want all kinds of other exclusive content related to Angular Firebase development, consider becoming a pro member at angularfirebase.com. You'll get a free copy of my book as well as access to my full length courses covering Ionic and Stripe payments. Thanks for watching, and I'll see you soon.
Over
over
the
the
past
past
few
few
years,
years
you
you
may
may
have
have
noticed
noticed
certain
certain
apps
apps
transitioning
transitioning
from
from
email
email
password
password
authentication
authentication
to
to
just
just
email
email
link
link
authentication.
authentication
And
and
there's
there's
2
2
main
main
benefits
benefits
to
to
doing
doing
this.
this
1st,
1st
your
your
users
users
don't
don't
have
have
to
to
remember
remember
a
a
password.
password
And
and
2,
2
it
it
provides
provides
a
a
frictionless
frictionless
sign
sign
up
up
process
process
that
that
makes
makes
it
it
more
more
likely
likely
for
for
you
you
to
to
onboard
onboard
new
new
users.
users
One
one
app
app
that
that
does
does
this
this
is
is
Open
open
Collective,
collective
and
and
the
the
possibility
possibility
just
just
became
became
available
available
to
to
Firebase
firebase
developers
developers
a
a
couple
couple
days
days
ago.
ago
And
and
I
i
wanted
wanted
to
to
send
send
a
a
thank
thank
you
you
out
out
to
to
all
all
Angular
angular
Firebase
firebase
Pro
pro
members
members
because
because
your
your
subscription
subscription
allows
allows
me
me
to
to
donate
donate
to
to
other
other
open
open
source
source
projects
projects
through
through
Open
open
Collective,
collective
and
and
I'm
i'm
very
very
grateful
grateful
to
to
be
be
able
able
to
to
do
do
that.
that
In
in
today's
today's
video,
video
we're
we're
going
going
to
to
use
use
Firebase
firebase
to
to
build
build
our
our
own
own
passwordless
passwordless
auth
auth
system,
system
which
which
will
will
take
take
a
a
user's
user's
email,
email
send
send
them
them
out
out
an
an
email
email
link
link
that
that
will
will
authenticate
authenticate
them
them
into
into
our
our
Firebase
firebase
app.
app
I'm
i'm
starting
starting
with
with
a
a
brand
brand
new
new
Angular
angular
app
app
and
and
making
making
sure
sure
that
that
it
it
has
has
a
a
router,
router
then
then
generating
generating
a
a
new
new
component
component
called
called
passwordless
passwordless
auth.
auth
From
from
there,
there
you'll
you'll
need
need
a
a
Firebase
firebase
project
project
with
with
AngularFire
angularfire
2
2
installed.
installed
And
and
if
if
you're
you're
starting
starting
from
from
an
an
existing
existing
project,
project
make
make
sure
sure
to
to
update
update
the
the
Firebase
firebase
SDK
sdk
to
to
the
the
latest
latest
version.
version
Then
then
go
go
into
into
the
the
Firebase
firebase
console
console
for
for
your
your
project
project
and
and
enable
enable
the
the
email
email
link
link
method
method
under
under
the
the
email
email
password
password
settings.
settings
Now
now
quickly
quickly
taking
taking
a
a
look
look
at
at
the
the
app
app
module,
module
you
you
should
should
have
have
the
the
AngularFire
angularfire
module
module
as
as
well
well
as
as
AngularFire
angularfire
auth
auth
in
in
here
here
with
with
your
your
Firebase
firebase
web
web
credentials.
credentials
Then
then
initialize
initialize
the
the
app
app
down
down
here
here
in
in
the
the
import
import
section.
section
From
from
there,
there
we'll
we'll
jump
jump
over
over
to
to
the
the
router
router
and
and
we'll
we'll
route
route
our
our
component
component
to
to
the
the
login
login
path.
path
What's
what's
going
going
to
to
happen
happen
is
is
the
the
user
user
will
will
initially
initially
land
land
on
on
this
this
component,
component
they'll
they'll
get
get
their
their
email
email
link,
link
and
and
then
then
they'll
they'll
come
come
back
back
to
to
this
this
component
component
with
with
a
a
special
special
auth
auth
code
code
that
that
we
we
can
can
use
use
to
to
log
log
them
them
in.
in
Depending
depending
on
on
your
your
requirements,
requirements
you
you
may
may
wanna
wanna
break
break
this
this
down
down
into
into
2
2
separate
separate
components.
components
1
1
to
to
get
get
the
the
actual
actual
link
link
and
and
then
then
another
another
one
one
that
that
they're
they're
redirected
redirected
to
to
to
to
actually
actually
sign
sign
in.
in
For
for
the
the
sake
sake
of
of
simplicity
simplicity
here,
here
we'll
we'll
just
just
do
do
everything
everything
in
in
a
a
single
single
component.
component
The
the
end
end
result
result
should
should
look
look
like
like
this.
this
The
the
user
user
enters
enters
their
their
email
email
address.
address
We
we
notify
notify
them
them
that
that
we
we
sent
sent
the
the
email.
email
They
they
go
go
into
into
their
their
inbox,
inbox
and
and
then
then
they
they
have
have
a
a
link
link
that
that
will
will
redirect
redirect
them
them
back
back
to
to
this
this
component.
component
Firebase
firebase
includes
includes
a
a
special
special
code
code
in
in
the
the
URL,
url
and
and
they
they
also
also
need
need
to
to
return
return
with
with
the
the
same
same
email
email
address
address
that
that
they
they
tried
tried
to
to
sign
sign
in
in
with
with
for
for
security
security
reasons.
reasons
And
and
the
the
way
way
we
we
keep
keep
track
track
of
of
that
that
between
between
redirects
redirects
is
is
by
by
saving
saving
the
the
email
email
in
in
local
local
storage.
storage
If
if
the
the
user
user
clicks
clicks
the
the
link
link
and
and
we
we
don't
don't
have
have
the
the
email
email
address
address
in
in
local
local
storage,
storage
will
will
need
need
to
to
prompt
prompt
them
them
for
for
it
it
again.
again
That's
that's
most
most
likely
likely
to
to
happen
happen
if
if
they
they
request
request
the
the
link
link
on
on
one
one
device
device
and
and
then
then
try
try
to
to
sign
sign
in
in
on
on
a
a
different
different
device.
device
In
in
progressive
progressive
web
web
apps,
apps
we
we
can
can
handle
handle
this
this
with
with
just
just
a
a
simple
simple
browser
browser
prompt.
prompt
And
and
if
if
the
the
user
user
tries
tries
to
to
enter
enter
an
an
email
email
that
that
doesn't
doesn't
match,
match
it
it
should
should
throw
throw
an
an
error.
error
So
so
we'll
we'll
build
build
a
a
component
component
that
that
has
has
a
a
way
way
to
to
display
display
those
those
errors.
errors
Then
then
if
if
we
we
try
try
to
to
redirect
redirect
the
the
link
link
again
again
and
and
this
this
time
time
enter
enter
the
the
correct
correct
email
email
address,
address
we
we
should
should
get
get
authenticated
authenticated
successfully.
successfully
We
we
can
can
start
start
this
this
implementation
implementation
out
out
in
in
the
the
component
component
typescript.
typescript
We're
we're
going
going
to
to
need
need
AngularFireAuth
angularfireauth
as
as
well
well
as
as
the
the
Angular
angular
router.
router
Then
then
we'll
we'll
jump
jump
down
down
here
here
and
and
define
define
a
a
few
few
properties
properties
to
to
manage
manage
the
the
state
state
of
of
this
this
component.
component
First,
first
we
we
have
have
the
the
user
user
which
which
is
is
an
an
observable.
observable
If
if
it's
it's
null,
null
we
we
know
know
the
the
user
user
is
is
not
not
logged
logged
in.
in
If
if
it's
it's
an
an
object,
object
we
we
know
know
the
the
user
user
is
is
logged
logged
in.
in
We
we
have
have
an
an
email
email
string
string
which
which
represents
represents
the
the
form
form
input.
input
Then
then
we
we
have
have
a
a
boolean
boolean
that
that
will
will
flip
flip
to
to
true
true
once
once
the
the
email
email
has
has
been
been
sent,
sent
and
and
lastly,
lastly
a
a
string
string
that
that
we
we
can
can
use
use
to
to
display
display
any
any
error
error
messages.
messages
From
from
there,
there
we'll
we'll
inject
inject
AngularFire
angularfire
auth
auth
and
and
the
the
router
router
and
and
the
the
constructor.
constructor
Then
then
we'll
we'll
define
define
our
our
user
user
as
as
the
the
AngularFire
angularfire
auth
auth
state
state
observable.
observable
Then
then
we
we
need
need
to
to
get
get
the
the
full
full
URL
url
in
in
the
the
browser,
browser
which
which
we
we
can
can
do
do
with
with
the
the
router
router
by
by
calling
calling
router
router
URL.
url
Then
then
we're
we're
going
going
to
to
write
write
a
a
method
method
that
that
looks
looks
to
to
this
this
URL
url
and
and
determines
determines
if
if
it's
it's
a
a
valid
valid
Firebase
firebase
email
email
link
link
URL.
url
And
and
if
if
so,
so
it
it
will
will
go
go
ahead
ahead
and
and
log
log
in
in
the
the
user.
user
But
but
first,
first
we
we
need
need
to
to
have
have
the
the
user
user
request
request
the
the
email
email
link
link
in
in
the
the
first
first
place.
place
And
and
to
to
do
do
that,
that
we
we
need
need
to
to
define
define
some
some
action
action
code
code
settings.
settings
In
in
this
this
case,
case
I'm
i'm
just
just
saying
saying
the
the
redirect
redirect
URL
url
is
is
going
going
to
to
be
be
local
local
host
host
4200
4200
to
to
our
our
login
login
component.
component
Then
then
because
because
we're
we're
in
in
an
an
async
async
function
function
and
and
also
also
we're
we're
going
going
to
to
be
be
interacting
interacting
with
with
the
the
DOM.
dom
I'm
i'm
going
going
to
to
wrap
wrap
everything
everything
in
in
a
a
try
try
catch
catch
block.
block
To
to
save
save
the
the
email
email
address
address
in
in
local
local
storage,
storage
we
we
need
need
to
to
interact
interact
with
with
the
the
DOM
dom
window,
window
and
and
that
that
could
could
fail
fail
with
with
things
things
like
like
server
server
side
side
rendering,
rendering
so
so
we
we
wrap
wrap
it
it
in
in
try
try
catch
catch
to
to
make
make
sure
sure
that
that
that's
that's
a
a
safe
safe
operation.
operation
This
this
method
method
here
here
will
will
happen
happen
when
when
the
the
user
user
clicks
clicks
on
on
the
the
login
login
button,
button
and
and
we're
we're
going
going
to
to
await
await
the
the
promise
promise
send
send
sign
sign
in
in
link
link
to
to
email,
email
which
which
resolves
resolves
once
once
that
that
email
email
has
has
been
been
sent.
sent
We
we
just
just
need
need
to
to
pass
pass
it
it
the
the
email
email
string
string
and
and
the
the
action
action
code
code
settings
settings
that
that
we
we
defined
defined
earlier.
earlier
After
after
that
that
promise
promise
resolves,
resolves
we
we
need
need
to
to
set
set
the
the
email
email
address
address
in
in
local
local
storage
storage
because
because
the
the
user
user
will
will
be
be
redirected
redirected
to
to
a
a
new
new
instance
instance
of
of
our
our
Angular
angular
app
app
and
and
it
it
will
will
have
have
no
no
memory
memory
of
of
the
the
email
email
address
address
that
that
was
was
used.
used
And
and
then
then
lastly,
lastly
we'll
we'll
flip
flip
our
our
email
email
sent
sent
variable
variable
to
to
true.
true
And
and
if
if
anything
anything
fails
fails
in
in
here,
here
we'll
we'll
display
display
it
it
in
in
the
the
error
error
message.
message
So
so
that
that
handles
handles
the
the
first
first
part
part
of
of
the
the
process.
process
That
that
sends
sends
the
the
email
email
out
out
to
to
the
the
user.
user
When
when
they
they
redirect,
redirect
we
we
wanna
wanna
confirm
confirm
that
that
it's
it's
a
a
valid
valid
link
link
and
and
sign
sign
them
them
into
into
our
our
app.
app
The
the
Firebase
firebase
SDK
sdk
can
can
parse
parse
the
the
link
link
for
for
us,
us
which
which
we
we
do
do
by
by
calling
calling
is
is
sign
sign
in
in
with
with
email
email
link
link
and
and
passing
passing
it
it
the
the
URL
url
that
that
we
we
get
get
with
with
the
the
Angular
angular
router.
router
If
if
it
it
is
is
a
a
valid
valid
link,
link
then
then
we
we
need
need
to
to
check
check
that
that
the
the
user
user
has
has
the
the
same
same
email
email
address
address
that
that
they
they
were
were
redirected
redirected
from.
from
That
that
should
should
be
be
the
the
email
email
that's
that's
in
in
local
local
storage,
storage
which
which
we
we
can
can
call
call
by
by
saying
saying
get
get
item
item
email
email
for
for
sign
sign
in.
in
But
but
if
if
not,
not
we
we
can
can
just
just
use
use
a
a
browser
browser
prompt
prompt
to
to
have
have
the
the
user
user
reenter
reenter
their
their
email
email
address
address
after
after
the
the
redirect.
redirect
At
at
this
this
point,
point
we
we
should
should
have
have
the
the
2
2
pieces
pieces
we
we
need
need
to
to
sign
sign
the
the
user
user
in
in
which
which
is
is
the
the
email
email
address
address
and
and
the
the
URL.
url
So
so
we'll
we'll
go
go
ahead
ahead
and
and
pass
pass
those
those
items
items
to
to
the
the
sign
sign
in
in
with
with
email
email
link
link
method
method
on
on
the
the
Firebase
firebase
SDK,
sdk
and
and
that's
that's
a
a
promise
promise
that
that
should
should
resolve
resolve
with
with
the
the
logged
logged
in
in
user.
user
And
and
lastly,
lastly
we'll
we'll
clean
clean
things
things
up
up
by
by
removing
removing
the
the
email
email
for
for
sign
sign
in
in
from
from
local
local
storage.
storage
Now
now
we
we
can
can
put
put
this
this
all
all
together
together
in
in
the
the
HTML.
html
The
the
first
first
thing
thing
I'll
i'll
do
do
is
is
show
show
a
a
success
success
message
message
if
if
the
the
user
user
is
is
already
already
logged
logged
in.
in
Because
because
our
our
user
user
is
is
an
an
observable,
observable
we
we
can
can
just
just
unwrap
unwrap
it
it
with
with
the
the
async
async
pipe.
pipe
Otherwise,
otherwise
we're
we're
going
going
to
to
display
display
this
this
login
login
template.
template
The
the
role
role
of
of
the
the
login
login
template
template
is
is
to
to
1,
1
collect
collect
the
the
user's
user's
email
email
address
address
and
and
2,
2
give
give
them
them
a
a
button
button
to
to
click
click
to
to
send
send
the
the
email
email
out.
out
To
to
collect
collect
the
the
email
email
address,
address
we
we
can
can
just
just
add
add
the
the
NG
ng
model
model
directive
directive
here
here
and
and
then
then
bind
bind
it
it
to
to
the
the
email
email
property
property
in
in
our
our
component
component
type
type
script.
script
Then
then
just
just
below
below
that,
that
I'll
i'll
add
add
a
a
button
button
that's
that's
disabled
disabled
if
if
the
the
email
email
has
has
already
already
been
been
sent.
sent
And
and
when
when
clicked,
clicked
it
it
will
will
fire
fire
off
off
the
the
send
send
email
email
link
link
method
method
to
to
the
the
email
email
address
address
entered
entered
in
in
the
the
form.
form
That's
that's
the
the
main
main
thing
thing
we
we
need
need
there,
there
but
but
I'll
i'll
also
also
go
go
ahead
ahead
and
and
add
add
another
another
div
div
here
here
that
that
will
will
show
show
a
a
success
success
message
message
when
when
the
the
email
email
has
has
been
been
sent
sent
or
or
an
an
error
error
message
message
if
if
there's
there's
any
any
problem
problem
with
with
the
the
login
login
process.
process
And
and
that's
that's
basically
basically
all
all
there
there
is
is
to
to
it.
it
You
you
should
should
now
now
have
have
a
a
working
working
passwordless
passwordless
auth
auth
system
system
in
in
your
your
Firebase
firebase
app.
app
If
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
and
and
subscribe.
subscribe
And
and
if
if
you
you
want
want
all
all
kinds
kinds
of
of
other
other
exclusive
exclusive
content
content
related
related
to
to
Angular
angular
Firebase
firebase
development,
development
consider
consider
becoming
becoming
a
a
pro
pro
member
member
at
at
angularfirebase.com.
angularfirebase.com
You'll
you'll
get
get
a
a
free
free
copy
copy
of
of
my
my
book
book
as
as
well
well
as
as
access
access
to
to
my
my
full
full
length
length
courses
courses
covering
covering
Ionic
ionic
and
and
Stripe
stripe
payments.
payments
Thanks
thanks
for
for
watching,
watching
and
and
I'll
i'll
see
see
you
you
soon.
soon
success
The speakers discuss the benefits of using the Open Collective app for passwordless authorizations, including a frictionless sign-up process and faster onboarding process. They also discuss the development of a passwordless authorization system using the Angular app and guide on setting it up, including the use of a different login path and a unique password to log in. They also discuss setting user and action code settings, including the use of a method to determine a valid email address and checking if the user has the same email address as when redirected. They also mention a success message when the user is logged in and a login template to collect the user's email address and send the email. Finally, they discuss setting email addresses in local storage and mention a free book and course access, encourages viewers to like and subscribe to their YouTube channel, and offer a way to receive a free book and course access.
Passwordless Authentication with Firebase
Over the past few years, you may have noticed certain apps transitioning from email password authentication to just email link authentication. And there's 2 main benefits to doing this. 1st, your users don't have to remember a password. And 2, it provides a frictionless sign up process that makes it more likely for you to onboard new users. One app that does this is Open Collective, and the possibility just became available to Firebase developers a couple days ago. And I wanted to send a thank you out to all Angular Firebase Pro members because your subscription allows me to donate to other open source projects through Open Collective, and I'm very grateful to be able to do that. In today's video, we're going to use Firebase to build our own passwordless auth system, which will take a user's email, send them out an email link that will authenticate them into our Firebase app. I'm starting with a brand new Angular app and making sure that it has a router, then generating a new component called passwordless auth. From there, you'll need a Firebase project with AngularFire 2 installed. And if you're starting from an existing project, make sure to update the Firebase SDK to the latest version. Then go into the Firebase console for your project and enable the email link method under the email password settings. Now quickly taking a look at the app module, you should have the AngularFire module as well as AngularFire auth in here with your Firebase web credentials. Then initialize the app down here in the import section. From there, we'll jump over to the router and we'll route our component to the login path. What's going to happen is the user will initially land on this component, they'll get their email link, and then they'll come back to this component with a special auth code that we can use to log them in. Depending on your requirements, you may wanna break this down into 2 separate components. 1 to get the actual link and then another one that they're redirected to to actually sign in. For the sake of simplicity here, we'll just do everything in a single component. The end result should look like this. The user enters their email address. We notify them that we sent the email. They go into their inbox, and then they have a link that will redirect them back to this component. Firebase includes a special code in the URL, and they also need to return with the same email address that they tried to sign in with for security reasons. And the way we keep track of that between redirects is by saving the email in local storage. If the user clicks the link and we don't have the email address in local storage, will need to prompt them for it again. That's most likely to happen if they request the link on one device and then try to sign in on a different device. In progressive web apps, we can handle this with just a simple browser prompt. And if the user tries to enter an email that doesn't match, it should throw an error. So we'll build a component that has a way to display those errors. Then if we try to redirect the link again and this time enter the correct email address, we should get authenticated successfully. We can start this implementation out in the component typescript. We're going to need AngularFireAuth as well as the Angular router. Then we'll jump down here and define a few properties to manage the state of this component. First, we have the user which is an observable. If it's null, we know the user is not logged in. If it's an object, we know the user is logged in. We have an email string which represents the form input. Then we have a boolean that will flip to true once the email has been sent, and lastly, a string that we can use to display any error messages. From there, we'll inject AngularFire auth and the router and the constructor. Then we'll define our user as the AngularFire auth state observable. Then we need to get the full URL in the browser, which we can do with the router by calling router URL. Then we're going to write a method that looks to this URL and determines if it's a valid Firebase email link URL. And if so, it will go ahead and log in the user. But first, we need to have the user request the email link in the first place. And to do that, we need to define some action code settings. In this case, I'm just saying the redirect URL is going to be local host 4200 to our login component. Then because we're in an async function and also we're going to be interacting with the DOM. I'm going to wrap everything in a try catch block. To save the email address in local storage, we need to interact with the DOM window, and that could fail with things like server side rendering, so we wrap it in try catch to make sure that that's a safe operation. This method here will happen when the user clicks on the login button, and we're going to await the promise send sign in link to email, which resolves once that email has been sent. We just need to pass it the email string and the action code settings that we defined earlier. After that promise resolves, we need to set the email address in local storage because the user will be redirected to a new instance of our Angular app and it will have no memory of the email address that was used. And then lastly, we'll flip our email sent variable to true. And if anything fails in here, we'll display it in the error message. So that handles the first part of the process. That sends the email out to the user. When they redirect, we wanna confirm that it's a valid link and sign them into our app. The Firebase SDK can parse the link for us, which we do by calling is sign in with email link and passing it the URL that we get with the Angular router. If it is a valid link, then we need to check that the user has the same email address that they were redirected from. That should be the email that's in local storage, which we can call by saying get item email for sign in. But if not, we can just use a browser prompt to have the user reenter their email address after the redirect. At this point, we should have the 2 pieces we need to sign the user in which is the email address and the URL. So we'll go ahead and pass those items to the sign in with email link method on the Firebase SDK, and that's a promise that should resolve with the logged in user. And lastly, we'll clean things up by removing the email for sign in from local storage. Now we can put this all together in the HTML. The first thing I'll do is show a success message if the user is already logged in. Because our user is an observable, we can just unwrap it with the async pipe. Otherwise, we're going to display this login template. The role of the login template is to 1, collect the user's email address and 2, give them a button to click to send the email out. To collect the email address, we can just add the NG model directive here and then bind it to the email property in our component type script. Then just below that, I'll add a button that's disabled if the email has already been sent. And when clicked, it will fire off the send email link method to the email address entered in the form. That's the main thing we need there, but I'll also go ahead and add another div here that will show a success message when the email has been sent or an error message if there's any problem with the login process. And that's basically all there is to it. You should now have a working passwordless auth system in your Firebase app. If this video helped you, please like and subscribe. And if you want all kinds of other exclusive content related to Angular Firebase development, consider becoming a pro member at angularfirebase.com. You'll get a free copy of my book as well as access to my full length courses covering Ionic and Stripe payments. Thanks for watching, and I'll see you soon.
The speakers discuss the benefits of using the Open Collective app for passwordless authorizations, including a frictionless sign-up process and faster onboarding process. They also discuss the development of a passwordless authorization system using the Angular app and guide on setting it up, including the use of a different login path and a unique password to log in. They also discuss setting user and action code settings, including the use of a method to determine a valid email address and checking if the user has the same email address as when redirected. They also mention a success message when the user is logged in and a login template to collect the user's email address and send the email. Finally, they discuss setting email addresses in local storage and mention a free book and course access, encourages viewers to like and subscribe to their YouTube channel, and offer a way to receive a free book and course access.