UPDATE Oct 10th, 2017: Fully updated tutorial for AngularFire v5 and Firestore https://youtu.be/e8GA1UOj8mE 


Angular OAuth with Firebase 
Tutorial https://angularfirebase.com/lessons/angular-firebase-authentication-tutorial-oauth/

In this episode, were going to build a user authentication system with Angular 4 and Firebase. Authentication is required in almost every Angular application, including this basic todo list app. The app currently has no authentication at all, but we want user to be able to log in with their Google, Facebook, Twitter, or Github account. 

At this point, it is assumed you have the AngularFire2 package installed and bootstrapped into your app. If not, go to the docs or checkout this video. 

STEP 1 - Generate Files

We are going to keep this feature super simple. 

The Auth Service will handle interaction with the Firebase API. 
The User Login Component will handle the login and logout buttons. 
The User Profile Component will show details about the User. 


STEP 2 - Activate Providers in Firebase

Head over to your firebase project and enable the providers you want. For non-google providers, you will need to get your own developer account and API keys. 

STEP 3 - Build the Service

The way you handle authentication with Firebase is by subscribing to the AngularFire-Auth observable which returns a Firebase-Auth-State object. 

Now that we have the AuthState object, we can take advantage of TypeScript accessors to get attributes. In this case, I'm interested in the User ID. 

Here's the beauty of firebase - you can implement 4 social auth providers with very little code. I start by creating a reusable  private function that takes the provider as an argument named `Social-Sign-In`.

When a user attempts to sign in two things can happen - success or failure. If it's a success, the `then` code will execute, if its's an error the `catch` code will execute. 

You may be wondering what the `updateUserData` function is about.  It's optional, but you may want to save user records to the Firebase realtime database. It can be useful if you plan on iterating over users in your app or if you collect additional data during signup. 

We finish off the service by creating an action for each of the four providers. This is as simple as returning the result of the `socialSignIn` function.

STEP 4 - Frontend Components

With the auth service complete, we can inject it into components. Here's how you might create a Login Component with functions to login with each provider handleError

In the template we can then bind these functions to the click event. 

The accessors we created in the service come in handy in for adding conditional logic to the template.  

That wraps it up. Check out the full Firebase OAuth article more detail on code and I'll you next time.
2024-02-04T08:41:57.849Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
7664febc-6d11-4166-b712-cae26fc2b10b
d3dd985f6a0c9602cf45242f359e40944249d4048c10936ae4c2debf78f01522
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
In this episode, we're going to build a user authentication system with Angular 4 and Firebase.
Authentication is required in almost every Angular application, including this basic to do list app.
The app currently has no authentication at all, but we want the user to be able to log in with their Google, Facebook, Twitter, or GitHub account.
At this point, it is assumed that the AngularFire 2 packet is installed and bootstrapped in your app.
If not, go to the docs or check out this video.
We're going to keep this feature super simple.
The auth service will handle all the interaction with the Firebase API.
The User Login component will handle the login and logout actions from the user and the User Profile component will show details about the user that are returned from Firebase.
Head over to your Firebase project and enable the providers you wanna use.
For non Google providers, you will need to get your own developer account and API keys.
The way you handle authentication with Firebase is by subscribing to the AngularFire auth observable, which returns a Firebase auth state object.
Now that we have the auth state object, we can take advantage of TypeScript accessors to get attributes.
Here's the beauty of Firebase.
You can implement 4 social auth providers with very little code.
I start by creating a reusable private function that takes the provider as an argument called social sign in.
When a user attempts to sign in, 2 things can happen, success or failure.
When it's a success, the VIN code will execute.
And if it's an error, the catch code will execute.
At this point, you may be wondering what the Update User Data function is about.
It's optional, but you may want to save user records to the Firebase real time database whenever a user logs in.
It can be useful if you plan on iterating over users in your app or if you collect additional data during sign up.
We finish off the service by creating an action for each of the 4 providers.
This is as simple as returning the result of the social sign in function.
With the auth service complete, we can now inject it into any component.
Here's how you might create a login component with functions to log in or sign out a user with each provider.
In the template, we can then bind these functions to the click event.
The accessors we created in the service come in handy in the template for adding conditional logic that can tell whether or not a user signed in or whether they have a certain this level to some content.
That's up OAuth with Firebase.
Check out our full Firebase OAuth article for more details on this code, and I'll see you next time.

Speaker 0: In this episode, we're going to build a user authentication system with Angular 4 and Firebase. Authentication is required in almost every Angular application, including this basic to do list app. The app currently has no authentication at all, but we want the user to be able to log in with their Google, Facebook, Twitter, or GitHub account. At this point, it is assumed that the AngularFire 2 packet is installed and bootstrapped in your app. If not, go to the docs or check out this video.

We're going to keep this feature super simple. The auth service will handle all the interaction with the Firebase API. The User Login component will handle the login and logout actions from the user and the User Profile component will show details about the user that are returned from Firebase. Head over to your Firebase project and enable the providers you wanna use. For non Google providers, you will need to get your own developer account and API keys.

The way you handle authentication with Firebase is by subscribing to the AngularFire auth observable, which returns a Firebase auth state object. Now that we have the auth state object, we can take advantage of TypeScript accessors to get attributes. Here's the beauty of Firebase. You can implement 4 social auth providers with very little code. I start by creating a reusable private function that takes the provider as an argument called social sign in.

When a user attempts to sign in, 2 things can happen, success or failure. When it's a success, the VIN code will execute. And if it's an error, the catch code will execute. At this point, you may be wondering what the Update User Data function is about. It's optional, but you may want to save user records to the Firebase real time database whenever a user logs in.

It can be useful if you plan on iterating over users in your app or if you collect additional data during sign up. We finish off the service by creating an action for each of the 4 providers. This is as simple as returning the result of the social sign in function. With the auth service complete, we can now inject it into any component. Here's how you might create a login component with functions to log in or sign out a user with each provider.

In the template, we can then bind these functions to the click event. The accessors we created in the service come in handy in the template for adding conditional logic that can tell whether or not a user signed in or whether they have a certain this level to some content. That's up OAuth with Firebase. Check out our full Firebase OAuth article for more details on this code, and I'll see you next time.
In this episode, we're going to build a user authentication system with Angular 4 and Firebase. Authentication is required in almost every Angular application, including this basic to do list app. The app currently has no authentication at all, but we want the user to be able to log in with their Google, Facebook, Twitter, or GitHub account. At this point, it is assumed that the AngularFire 2 packet is installed and bootstrapped in your app. If not, go to the docs or check out this video. We're going to keep this feature super simple. The auth service will handle all the interaction with the Firebase API. The User Login component will handle the login and logout actions from the user and the User Profile component will show details about the user that are returned from Firebase. Head over to your Firebase project and enable the providers you wanna use. For non Google providers, you will need to get your own developer account and API keys.
The way you handle authentication with Firebase is by subscribing to the AngularFire auth observable, which returns a Firebase auth state object. Now that we have the auth state object, we can take advantage of TypeScript accessors to get attributes. Here's the beauty of Firebase. You can implement 4 social auth providers with very little code.
security
I start by creating a reusable private function that takes the provider as an argument called social sign in. When a user attempts to sign in, 2 things can happen, success or failure. When it's a success, the VIN code will execute. And if it's an error, the catch code will execute. At this point, you may be wondering what the Update User Data function is about. It's optional, but you may want to save user records to the Firebase real time database whenever a user logs in.
It can be useful if you plan on iterating over users in your app or if you collect additional data during sign up. We finish off the service by creating an action for each of the 4 providers. This is as simple as returning the result of the social sign in function.
data
systems
programming
data management
With the auth service complete, we can now inject it into any component. Here's how you might create a login component with functions to log in or sign out a user with each provider. In the template, we can then bind these functions to the click event. The accessors we created in the service come in handy in the template for adding conditional logic that can tell whether or not a user signed in or whether they have a certain this level to some content. That's up OAuth with Firebase. Check out our full Firebase OAuth article for more details on this code, and I'll see you next time.
In this episode, we're going to build a user authentication system with Angular 4 and Firebase. Authentication is required in almost every Angular application, including this basic to do list app. The app currently has no authentication at all, but we want the user to be able to log in with their Google, Facebook, Twitter, or GitHub account. At this point, it is assumed that the AngularFire 2 packet is installed and bootstrapped in your app. If not, go to the docs or check out this video. We're going to keep this feature super simple. The auth service will handle all the interaction with the Firebase API. The User Login component will handle the login and logout actions from the user and the User Profile component will show details about the user that are returned from Firebase. Head over to your Firebase project and enable the providers you wanna use. For non Google providers, you will need to get your own developer account and API keys. The way you handle authentication with Firebase is by subscribing to the AngularFire auth observable, which returns a Firebase auth state object. Now that we have the auth state object, we can take advantage of TypeScript accessors to get attributes. Here's the beauty of Firebase. You can implement 4 social auth providers with very little code. I start by creating a reusable private function that takes the provider as an argument called social sign in. When a user attempts to sign in, 2 things can happen, success or failure. When it's a success, the VIN code will execute. And if it's an error, the catch code will execute. At this point, you may be wondering what the Update User Data function is about. It's optional, but you may want to save user records to the Firebase real time database whenever a user logs in. It can be useful if you plan on iterating over users in your app or if you collect additional data during sign up. We finish off the service by creating an action for each of the 4 providers. This is as simple as returning the result of the social sign in function. With the auth service complete, we can now inject it into any component. Here's how you might create a login component with functions to log in or sign out a user with each provider. In the template, we can then bind these functions to the click event. The accessors we created in the service come in handy in the template for adding conditional logic that can tell whether or not a user signed in or whether they have a certain this level to some content. That's up OAuth with Firebase. Check out our full Firebase OAuth article for more details on this code, and I'll see you next time.
In
in
this
this
episode,
episode
we're
we're
going
going
to
to
build
build
a
a
user
user
authentication
authentication
system
system
with
with
Angular
angular
4
4
and
and
Firebase.
firebase
Authentication
authentication
is
is
required
required
in
in
almost
almost
every
every
Angular
angular
application,
application
including
including
this
this
basic
basic
to
to
do
do
list
list
app.
app
The
the
app
app
currently
currently
has
has
no
no
authentication
authentication
at
at
all,
all
but
but
we
we
want
want
the
the
user
user
to
to
be
be
able
able
to
to
log
log
in
in
with
with
their
their
Google,
google
Facebook,
facebook
Twitter,
twitter
or
or
GitHub
github
account.
account
At
at
this
this
point,
point
it
it
is
is
assumed
assumed
that
that
the
the
AngularFire
angularfire
2
2
packet
packet
is
is
installed
installed
and
and
bootstrapped
bootstrapped
in
in
your
your
app.
app
If
if
not,
not
go
go
to
to
the
the
docs
docs
or
or
check
check
out
out
this
this
video.
video
We're
we're
going
going
to
to
keep
keep
this
this
feature
feature
super
super
simple.
simple
The
the
auth
auth
service
service
will
will
handle
handle
all
all
the
the
interaction
interaction
with
with
the
the
Firebase
firebase
API.
api
The
the
User
user
Login
login
component
component
will
will
handle
handle
the
the
login
login
and
and
logout
logout
actions
actions
from
from
the
the
user
user
and
and
the
the
User
user
Profile
profile
component
component
will
will
show
show
details
details
about
about
the
the
user
user
that
that
are
are
returned
returned
from
from
Firebase.
firebase
Head
head
over
over
to
to
your
your
Firebase
firebase
project
project
and
and
enable
enable
the
the
providers
providers
you
you
wanna
wanna
use.
use
For
for
non
non
Google
google
providers,
providers
you
you
will
will
need
need
to
to
get
get
your
your
own
own
developer
developer
account
account
and
and
API
api
keys.
keys
The
the
way
way
you
you
handle
handle
authentication
authentication
with
with
Firebase
firebase
is
is
by
by
subscribing
subscribing
to
to
the
the
AngularFire
angularfire
auth
auth
observable,
observable
which
which
returns
returns
a
a
Firebase
firebase
auth
auth
state
state
object.
object
Now
now
that
that
we
we
have
have
the
the
auth
auth
state
state
object,
object
we
we
can
can
take
take
advantage
advantage
of
of
TypeScript
typescript
accessors
accessors
to
to
get
get
attributes.
attributes
Here's
here's
the
the
beauty
beauty
of
of
Firebase.
firebase
You
you
can
can
implement
implement
4
4
social
social
auth
auth
providers
providers
with
with
very
very
little
little
code.
code
I
i
start
start
by
by
creating
creating
a
a
reusable
reusable
private
private
function
function
that
that
takes
takes
the
the
provider
provider
as
as
an
an
argument
argument
called
called
social
social
sign
sign
in.
in
When
when
a
a
user
user
attempts
attempts
to
to
sign
sign
in,
in
2
2
things
things
can
can
happen,
happen
success
success
or
or
failure.
failure
When
when
it's
it's
a
a
success,
success
the
the
VIN
vin
code
code
will
will
execute.
execute
And
and
if
if
it's
it's
an
an
error,
error
the
the
catch
catch
code
code
will
will
execute.
execute
At
at
this
this
point,
point
you
you
may
may
be
be
wondering
wondering
what
what
the
the
Update
update
User
user
Data
data
function
function
is
is
about.
about
It's
it's
optional,
optional
but
but
you
you
may
may
want
want
to
to
save
save
user
user
records
records
to
to
the
the
Firebase
firebase
real
real
time
time
database
database
whenever
whenever
a
a
user
user
logs
logs
in.
in
It
it
can
can
be
be
useful
useful
if
if
you
you
plan
plan
on
on
iterating
iterating
over
over
users
users
in
in
your
your
app
app
or
or
if
if
you
you
collect
collect
additional
additional
data
data
during
during
sign
sign
up.
up
We
we
finish
finish
off
off
the
the
service
service
by
by
creating
creating
an
an
action
action
for
for
each
each
of
of
the
the
4
4
providers.
providers
This
this
is
is
as
as
simple
simple
as
as
returning
returning
the
the
result
result
of
of
the
the
social
social
sign
sign
in
in
function.
function
With
with
the
the
auth
auth
service
service
complete,
complete
we
we
can
can
now
now
inject
inject
it
it
into
into
any
any
component.
component
Here's
here's
how
how
you
you
might
might
create
create
a
a
login
login
component
component
with
with
functions
functions
to
to
log
log
in
in
or
or
sign
sign
out
out
a
a
user
user
with
with
each
each
provider.
provider
In
in
the
the
template,
template
we
we
can
can
then
then
bind
bind
these
these
functions
functions
to
to
the
the
click
click
event.
event
The
the
accessors
accessors
we
we
created
created
in
in
the
the
service
service
come
come
in
in
handy
handy
in
in
the
the
template
template
for
for
adding
adding
conditional
conditional
logic
logic
that
that
can
can
tell
tell
whether
whether
or
or
not
not
a
a
user
user
signed
signed
in
in
or
or
whether
whether
they
they
have
have
a
a
certain
certain
this
this
level
level
to
to
some
some
content.
content
That's
that's
up
up
OAuth
oauth
with
with
Firebase.
firebase
Check
check
out
out
our
our
full
full
Firebase
firebase
OAuth
oauth
article
article
for
for
more
more
details
details
on
on
this
this
code,
code
and
and
I'll
i'll
see
see
you
you
next
next
time.
time
success
The speaker discusses a new user authentication system with Angular 4 and Isabel, which requires the user to log in with their Google, Facebook, Twitter, or GitHub account. The authorization service handles all interactions with the cheaperayment API and allows users to implement 4 social denies providers with very little code. The service is reusable and allows for the creation of login components with functions to log in or sign out a user with each provider.
OAuth with Angular and Firebase Tutorial
In this episode, we're going to build a user authentication system with Angular 4 and Firebase. Authentication is required in almost every Angular application, including this basic to do list app. The app currently has no authentication at all, but we want the user to be able to log in with their Google, Facebook, Twitter, or GitHub account. At this point, it is assumed that the AngularFire 2 packet is installed and bootstrapped in your app. If not, go to the docs or check out this video. We're going to keep this feature super simple. The auth service will handle all the interaction with the Firebase API. The User Login component will handle the login and logout actions from the user and the User Profile component will show details about the user that are returned from Firebase. Head over to your Firebase project and enable the providers you wanna use. For non Google providers, you will need to get your own developer account and API keys. The way you handle authentication with Firebase is by subscribing to the AngularFire auth observable, which returns a Firebase auth state object. Now that we have the auth state object, we can take advantage of TypeScript accessors to get attributes. Here's the beauty of Firebase. You can implement 4 social auth providers with very little code. I start by creating a reusable private function that takes the provider as an argument called social sign in. When a user attempts to sign in, 2 things can happen, success or failure. When it's a success, the VIN code will execute. And if it's an error, the catch code will execute. At this point, you may be wondering what the Update User Data function is about. It's optional, but you may want to save user records to the Firebase real time database whenever a user logs in. It can be useful if you plan on iterating over users in your app or if you collect additional data during sign up. We finish off the service by creating an action for each of the 4 providers. This is as simple as returning the result of the social sign in function. With the auth service complete, we can now inject it into any component. Here's how you might create a login component with functions to log in or sign out a user with each provider. In the template, we can then bind these functions to the click event. The accessors we created in the service come in handy in the template for adding conditional logic that can tell whether or not a user signed in or whether they have a certain this level to some content. That's up OAuth with Firebase. Check out our full Firebase OAuth article for more details on this code, and I'll see you next time.
The speaker discusses a new user authentication system with Angular 4 and Isabel, which requires the user to log in with their Google, Facebook, Twitter, or GitHub account. The authorization service handles all interactions with the cheaperayment API and allows users to implement 4 social denies providers with very little code. The service is reusable and allows for the creation of login components with functions to log in or sign out a user with each provider.