Learn how to build a Redux-style authentication system with Ngrx and Firebase Google OAuth. New to ngrx? Start here: https://youtu.be/f97ICOaekNU

Full Lesson: https://angularfirebase.com/lessons/ngrx-with-firebase-auth-google-oauth-login/
Demo App: https://github.com/codediodeio/ngrx-fire
Ngrx: https://github.com/ngrx/platform
AngularFire2: https://github.com/angular/angularfire2
2024-02-04T08:08:06.505Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
e577a5e8-b847-4de1-909c-49900bb00eeb
c1f7db79b3638f15f4d738ba62d8c64f679d65d0b65fde26fe791d5c31016362
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
User authentication involves some of the most critical data that a JavaScript app will have to manage.
In this lesson, we're going to implement Google OAuth via Firebase, but we're going to do it using NGRX and the one way data flow of Redux.
I'd like to point out that this video is going to cover a lot of code very OE quickly.
So if you're brand new to NGRX, check out some of the links in the description for an easier introduction into Redux.
The feature we're building today will check if a user signed in, and if not, they can sign in via Google and then sign out.
And all this will be kept in a single data store through n g r x.
OI.
The first step is to add the necessary files to the NG module.
We're going to need AngularFire 2 along with ngrxstoreandeffects.
And we're gonna build our own user effects and user reducer.
So we add everything to the import section and we're good to go.
OI.
The next step is to model our user data.
We're going to keep the user interface as simple as possible.
It'll just have a user ID, display name, and then an optional property for loading and an optional property for error.
Then we'll create a user class that uses these properties OS and build it by passing it a user ID and display name that we get back from Firebase.
From here, we can start building our user actions.
O.
The first and probably most important action is get user which will determine if the user is currently authenticated in Firebase.
OAuth.
If they are authenticated then we'll run an authenticated action that will update the current user data on the data store.
OAuth.
If they're not authenticated, then we'll run a not authenticated action that will just set a default guest user on the data store.
OAuth.
Then to log in or sign up user, we'll set up a Google login action and we'll also give the user the ability to log out.
And we'll set one more action for auth error just to handle any errors that might come up.
Now each of these actions will get its own class that implements the action interface.
OAuth.
It will have a read only type that corresponds to the constant above and the constructor allows it to handle a data payload if necessary.
OAuth.
To keep this part brief, we're just gonna follow the same exact pattern for every other action.
But when building a real app, it'd be a good idea to strong type the payload for each of these actions.
OAuth.
And the final step is to export all these types as just a single type called all so we can use it easily in other files.
Now we can move on to the reducer function that will update the state after each auth event.
So we import the user actions and user class and then we set a default user that just has a null user ID and a display name of guest.
In the reducer function, we pass it the state which will just be the default user if it's not defined along with the action that's being executed.
From there, we set up a switch statement that's based on the action.
OAuth.
When we run the get user action, it's only going to change the loading state to true because we have to wait for the data to return from Firebase.
OAuth, then when the user is authenticated, it's going to come with a user object so we can use that user object to update the new state.
OAuth.
To do that, we use the spread syntax in JavaScript, which is the three dots before each of these objects.
For the not authenticated OS and we basically just do the same thing, but instead of passing it the action payload, we pass it the default guest user.
OAuth.
Then for the other actions, we follow the same pattern just updating the current state along with any new data and toggling the loading state as it corresponds to the action.
OI.
From here, we can use n g r x effects to handle the asynchronous nature of these actions.
So we import effect and actions from n g r x, OS, our user class, and AngularFireAuth, and a whole bunch of RxJS operators that we'll see in use here when we start building the effects.
OI.
The first effect we're going to build is the 'getUser' effect which is going to tell us whether or not the user is currently authenticated.
OAuth.
So we use the effect decorator and then we say get user is an observable action.
Then on the actions, we set it to the get user action that we defined earlier.
We're not actually gonna send data with the GetUser action, but if you wanted to map the payload down, this is how you would do it here.
From there, we can call switch map and then return the AngularFire auth state observable.
Then I'm going to delay this function just for 2 seconds to show the loading spinner on front end.
And when we receive the auth data back from Firebase, we can check to see if it exists.
And if it does, we'll create a new user object using that user ID and display name and then trigger the authenticated action since we know the user is authenticated in Firebase.
OAuth, but if the auth data is null, then we know the user is not logged in so we return that not authenticated action, which will update the data store with the guest user.
OAuth and as a final step here, we'll add a catch operator and the only caveat here is you have to return the value as an observable.
So we'll call observable of and our auth error action.
Okay.
So that allows us to determine whether or not the user's logged in.
Now we need another effect to log in the user through Google OAuth.
OAuth.
So we'll start off doing the same thing, but this time we'll use the Google login action.
And then we'll map that down to the payload just like we did before.
OI.
Um, the difference here is that when you log in with Firebase, it returns a Promise.
So what we're going to do is create a function that will return this Promise and then we'll convert that into an observable.
We'll define this function as soon as we're done with this effect.
But what happens is it returns the credential from Firebase, which we don't actually need.
Instead we can just call the getUser action and that will update the data store with the current user.
And again we can catch the error here as well by setting it to an observable.
OAuth.
Now we can define the Google login function which is just straight from AngularFire 2.
We just set the provider to Google and then we call AngularFire auth, sign in with pop up, and we're good.
Then the last thing we need is a logout effect.
OAuth.
This is going to look almost identical to the one we just defined.
The only difference being we'll set the user to not authenticated after the sign out promise resolves.
OAuth.
We call switch map and then map that down to an observable of the sign out promise and then map that to the user action not authenticated.
Again, I apologize if that went too quick, but you can get the source code for this project on GitHub or you can get a detailed write up at angularfirebase.com.
OI.
At this point, the only thing left to do is put everything together in a component.
So here we import store and observable and then we import our user class and user actions.
Then we set a user property on the AppState interface.
OAuth, then we declare user observable and inject the store in the constructor.
So the first thing we need to do is determine if our user is logged in or not.
OAuth.
We can do that during NG OnInit by dispatching the getUser action.
So first, we'll get the user observable from the store and then we'll dispatch the action.
This tells us if the user is logged in or not as soon as the app component is created.
From there, we just need a couple of event handlers we can attach to buttons that will log in the user or log out the user.
So now we can handle the entire OSs by simply calling store dot dispatch with the corresponding action.
Now we can go into the HTML and unwrap the user observable by using the async pipe and then setting it as the user template variable.
Then we'll just display the username as well as the user ID.
OI.
If there's no user ID, we know the user is not logged in, so we can show the Google login button.
So we just call the Google login method on click, and we'll use a conditional CSS class to show the loading spinner in the button when the user login process is taking place.
For the logout button, we just do the exact opposite by only showing a button when the user is currently logged in.
Now let's go try it out with the Redux Dev Tool plugin.
We can see we first get OAuth, the Get User action, and they're not authenticated so we see the sign in with Google button.
Then we go ahead and click that, and we get the Google login attempt.
OI and then we get the get user action again and then we're authenticated.
So now our entire Firebase auth process is a single one way data flow that's managed by the OAuth Global Data Store.
That's it for NGRX with Firebase Auth.
If this video helped you, please like and subscribe.
And And if you wanna support the channel, consider becoming a pro subscriber at angularfirebase.com.
You'll get access to 1 on 1 project consulting in our OLAC team as well as a free copy of the Angular Firebase Survival Guide.
Thanks for watching and I'll see you soon.

Speaker 0: User authentication involves some of the most critical data that a JavaScript app will have to manage. In this lesson, we're going to implement Google OAuth via Firebase, but we're going to do it using NGRX and the one way data flow of Redux. I'd like to point out that this video is going to cover a lot of code very OE quickly. So if you're brand new to NGRX, check out some of the links in the description for an easier introduction into Redux. The feature we're building today will check if a user signed in, and if not, they can sign in via Google and then sign out.

And all this will be kept in a single data store through n g r x. OI. The first step is to add the necessary files to the NG module. We're going to need AngularFire 2 along with ngrxstoreandeffects. And we're gonna build our own user effects and user reducer.

So we add everything to the import section and we're good to go. OI. The next step is to model our user data. We're going to keep the user interface as simple as possible. It'll just have a user ID, display name, and then an optional property for loading and an optional property for error.

Then we'll create a user class that uses these properties OS and build it by passing it a user ID and display name that we get back from Firebase. From here, we can start building our user actions. O. The first and probably most important action is get user which will determine if the user is currently authenticated in Firebase. OAuth.

If they are authenticated then we'll run an authenticated action that will update the current user data on the data store. OAuth. If they're not authenticated, then we'll run a not authenticated action that will just set a default guest user on the data store. OAuth. Then to log in or sign up user, we'll set up a Google login action and we'll also give the user the ability to log out.

And we'll set one more action for auth error just to handle any errors that might come up. Now each of these actions will get its own class that implements the action interface. OAuth. It will have a read only type that corresponds to the constant above and the constructor allows it to handle a data payload if necessary. OAuth.

To keep this part brief, we're just gonna follow the same exact pattern for every other action. But when building a real app, it'd be a good idea to strong type the payload for each of these actions. OAuth. And the final step is to export all these types as just a single type called all so we can use it easily in other files. Now we can move on to the reducer function that will update the state after each auth event.

So we import the user actions and user class and then we set a default user that just has a null user ID and a display name of guest. In the reducer function, we pass it the state which will just be the default user if it's not defined along with the action that's being executed. From there, we set up a switch statement that's based on the action. OAuth. When we run the get user action, it's only going to change the loading state to true because we have to wait for the data to return from Firebase.

OAuth, then when the user is authenticated, it's going to come with a user object so we can use that user object to update the new state. OAuth. To do that, we use the spread syntax in JavaScript, which is the three dots before each of these objects. For the not authenticated OS and we basically just do the same thing, but instead of passing it the action payload, we pass it the default guest user. OAuth.

Then for the other actions, we follow the same pattern just updating the current state along with any new data and toggling the loading state as it corresponds to the action. OI. From here, we can use n g r x effects to handle the asynchronous nature of these actions. So we import effect and actions from n g r x, OS, our user class, and AngularFireAuth, and a whole bunch of RxJS operators that we'll see in use here when we start building the effects. OI.

The first effect we're going to build is the 'getUser' effect which is going to tell us whether or not the user is currently authenticated. OAuth. So we use the effect decorator and then we say get user is an observable action. Then on the actions, we set it to the get user action that we defined earlier. We're not actually gonna send data with the GetUser action, but if you wanted to map the payload down, this is how you would do it here.

From there, we can call switch map and then return the AngularFire auth state observable. Then I'm going to delay this function just for 2 seconds to show the loading spinner on front end. And when we receive the auth data back from Firebase, we can check to see if it exists. And if it does, we'll create a new user object using that user ID and display name and then trigger the authenticated action since we know the user is authenticated in Firebase. OAuth, but if the auth data is null, then we know the user is not logged in so we return that not authenticated action, which will update the data store with the guest user.

OAuth and as a final step here, we'll add a catch operator and the only caveat here is you have to return the value as an observable. So we'll call observable of and our auth error action. Okay. So that allows us to determine whether or not the user's logged in. Now we need another effect to log in the user through Google OAuth.

OAuth. So we'll start off doing the same thing, but this time we'll use the Google login action. And then we'll map that down to the payload just like we did before. OI. Um, the difference here is that when you log in with Firebase, it returns a Promise.

So what we're going to do is create a function that will return this Promise and then we'll convert that into an observable. We'll define this function as soon as we're done with this effect. But what happens is it returns the credential from Firebase, which we don't actually need. Instead we can just call the getUser action and that will update the data store with the current user. And again we can catch the error here as well by setting it to an observable.

OAuth. Now we can define the Google login function which is just straight from AngularFire 2. We just set the provider to Google and then we call AngularFire auth, sign in with pop up, and we're good. Then the last thing we need is a logout effect. OAuth.

This is going to look almost identical to the one we just defined. The only difference being we'll set the user to not authenticated after the sign out promise resolves. OAuth. We call switch map and then map that down to an observable of the sign out promise and then map that to the user action not authenticated. Again, I apologize if that went too quick, but you can get the source code for this project on GitHub or you can get a detailed write up at angularfirebase.com.

OI. At this point, the only thing left to do is put everything together in a component. So here we import store and observable and then we import our user class and user actions. Then we set a user property on the AppState interface. OAuth, then we declare user observable and inject the store in the constructor.

So the first thing we need to do is determine if our user is logged in or not. OAuth. We can do that during NG OnInit by dispatching the getUser action. So first, we'll get the user observable from the store and then we'll dispatch the action. This tells us if the user is logged in or not as soon as the app component is created.

From there, we just need a couple of event handlers we can attach to buttons that will log in the user or log out the user. So now we can handle the entire OSs by simply calling store dot dispatch with the corresponding action. Now we can go into the HTML and unwrap the user observable by using the async pipe and then setting it as the user template variable. Then we'll just display the username as well as the user ID. OI.

If there's no user ID, we know the user is not logged in, so we can show the Google login button. So we just call the Google login method on click, and we'll use a conditional CSS class to show the loading spinner in the button when the user login process is taking place. For the logout button, we just do the exact opposite by only showing a button when the user is currently logged in. Now let's go try it out with the Redux Dev Tool plugin. We can see we first get OAuth, the Get User action, and they're not authenticated so we see the sign in with Google button.

Then we go ahead and click that, and we get the Google login attempt. OI and then we get the get user action again and then we're authenticated. So now our entire Firebase auth process is a single one way data flow that's managed by the OAuth Global Data Store. That's it for NGRX with Firebase Auth. If this video helped you, please like and subscribe.

And And if you wanna support the channel, consider becoming a pro subscriber at angularfirebase.com. You'll get access to 1 on 1 project consulting in our OLAC team as well as a free copy of the Angular Firebase Survival Guide. Thanks for watching and I'll see you soon.
User authentication involves some of the most critical data that a JavaScript app will have to manage. In this lesson, we're going to implement Google OAuth via Firebase, but we're going to do it using NGRX and the one way data flow of Redux.
I'd like to point out that this video is going to cover a lot of code very OE quickly. So if you're brand new to NGRX, check out some of the links in the description for an easier introduction into Redux. The feature we're building today will check if a user signed in, and if not, they can sign in via Google and then sign out.
streaming
And all this will be kept in a single data store through n g r x. OI. The first step is to add the necessary files to the NG module. We're going to need AngularFire 2 along with ngrxstoreandeffects. And we're gonna build our own user effects and user reducer.
databases
So we add everything to the import section and we're good to go.
OI. The next step is to model our user data. We're going to keep the user interface as simple as possible. It'll just have a user ID, display name, and then an optional property for loading and an optional property for error. Then we'll create a user class that uses these properties OS and build it by passing it a user ID and display name that we get back from Firebase.
modeling
From here, we can start building our user actions. O. The first and probably most important action is get user which will determine if the user is currently authenticated in Firebase. OAuth. If they are authenticated then we'll run an authenticated action that will update the current user data on the data store. OAuth. If they're not authenticated, then we'll run a not authenticated action that will just set a default guest user on the data store.
OAuth. Then to log in or sign up user, we'll set up a Google login action and we'll also give the user the ability to log out. And we'll set one more action for auth error just to handle any errors that might come up. Now each of these actions will get its own class that implements the action interface.
google
OAuth. It will have a read only type that corresponds to the constant above and the constructor allows it to handle a data payload if necessary.
OAuth. To keep this part brief, we're just gonna follow the same exact pattern for every other action. But when building a real app, it'd be a good idea to strong type the payload for each of these actions. OAuth. And the final step is to export all these types as just a single type called all so we can use it easily in other files.
software
Now we can move on to the reducer function that will update the state after each auth event. So we import the user actions and user class and then we set a default user that just has a null user ID and a display name of guest. In the reducer function, we pass it the state which will just be the default user if it's not defined along with the action that's being executed. From there, we set up a switch statement that's based on the action. OAuth. When we run the get user action, it's only going to change the loading state to true because we have to wait for the data to return from Firebase. OAuth, then when the user is authenticated, it's going to come with a user object so we can use that user object to update the new state. OAuth. To do that, we use the spread syntax in JavaScript, which is the three dots before each of these objects. For the not authenticated OS and we basically just do the same thing, but instead of passing it the action payload, we pass it the default guest user.
OAuth. Then for the other actions, we follow the same pattern just updating the current state along with any new data and toggling the loading state as it corresponds to the action. OI. From here, we can use n g r x effects to handle the asynchronous nature of these actions. So we import effect and actions from n g r x, OS, our user class, and AngularFireAuth, and a whole bunch of RxJS operators that we'll see in use here when we start building the effects.
operations
OI. The first effect we're going to build is the 'getUser' effect which is going to tell us whether or not the user is currently authenticated. OAuth. So we use the effect decorator and then we say get user is an observable action. Then on the actions, we set it to the get user action that we defined earlier. We're not actually gonna send data with the GetUser action, but if you wanted to map the payload down, this is how you would do it here. From there, we can call switch map and then return the AngularFire auth state observable. Then I'm going to delay this function just for 2 seconds to show the loading spinner on front end. And when we receive the auth data back from Firebase, we can check to see if it exists. And if it does, we'll create a new user object using that user ID and display name and then trigger the authenticated action since we know the user is authenticated in Firebase. OAuth, but if the auth data is null, then we know the user is not logged in so we return that not authenticated action, which will update the data store with the guest user.
OAuth and as a final step here, we'll add a catch operator and the only caveat here is you have to return the value as an observable. So we'll call observable of and our auth error action. Okay. So that allows us to determine whether or not the user's logged in. Now we need another effect to log in the user through Google OAuth. OAuth. So we'll start off doing the same thing, but this time we'll use the Google login action.
google
operations
And then we'll map that down to the payload just like we did before. OI. Um, the difference here is that when you log in with Firebase, it returns a Promise. So what we're going to do is create a function that will return this Promise and then we'll convert that into an observable. We'll define this function as soon as we're done with this effect. But what happens is it returns the credential from Firebase, which we don't actually need.
Instead we can just call the getUser action and that will update the data store with the current user. And again we can catch the error here as well by setting it to an observable. OAuth. Now we can define the Google login function which is just straight from AngularFire 2. We just set the provider to Google and then we call AngularFire auth, sign in with pop up, and we're good. Then the last thing we need is a logout effect. OAuth. This is going to look almost identical to the one we just defined.
google
The only difference being we'll set the user to not authenticated after the sign out promise resolves. OAuth. We call switch map and then map that down to an observable of the sign out promise and then map that to the user action not authenticated. Again, I apologize if that went too quick, but you can get the source code for this project on GitHub or you can get a detailed write up at angularfirebase.com. OI. At this point, the only thing left to do is put everything together in a component. So here we import store and observable and then we import our user class and user actions. Then we set a user property on the AppState interface. OAuth, then we declare user observable and inject the store in the constructor. So the first thing we need to do is determine if our user is logged in or not. OAuth. We can do that during NG OnInit by dispatching the getUser action. So first, we'll get the user observable from the store and then we'll dispatch the action. This tells us if the user is logged in or not as soon as the app component is created. From there, we just need a couple of event handlers we can attach to buttons that will log in the user or log out the user. So now we can handle the entire OSs by simply calling store dot dispatch with the corresponding action. Now we can go into the HTML and unwrap the user observable by using the async pipe and then setting it as the user template variable.
Then we'll just display the username as well as the user ID. OI. If there's no user ID, we know the user is not logged in, so we can show the Google login button. So we just call the Google login method on click, and we'll use a conditional CSS class to show the loading spinner in the button when the user login process is taking place. For the logout button, we just do the exact opposite by only showing a button when the user is currently logged in.
google
Now let's go try it out with the Redux Dev Tool plugin.
We can see we first get OAuth, the Get User action, and they're not authenticated so we see the sign in with Google button. Then we go ahead and click that, and we get the Google login attempt. OI and then we get the get user action again and then we're authenticated.
google
So now our entire Firebase auth process is a single one way data flow that's managed by the OAuth Global Data Store. That's it for NGRX with Firebase Auth. If this video helped you, please like and subscribe. And And if you wanna support the channel, consider becoming a pro subscriber at angularfirebase.com. You'll get access to 1 on 1 project consulting in our OLAC team as well as a free copy of the Angular Firebase Survival Guide.
Thanks for watching and I'll see you soon.
User authentication involves some of the most critical data that a JavaScript app will have to manage. In this lesson, we're going to implement Google OAuth via Firebase, but we're going to do it using NGRX and the one way data flow of Redux. I'd like to point out that this video is going to cover a lot of code very OE quickly. So if you're brand new to NGRX, check out some of the links in the description for an easier introduction into Redux. The feature we're building today will check if a user signed in, and if not, they can sign in via Google and then sign out. And all this will be kept in a single data store through n g r x. OI. The first step is to add the necessary files to the NG module. We're going to need AngularFire 2 along with ngrxstoreandeffects. And we're gonna build our own user effects and user reducer. So we add everything to the import section and we're good to go. OI. The next step is to model our user data. We're going to keep the user interface as simple as possible. It'll just have a user ID, display name, and then an optional property for loading and an optional property for error. Then we'll create a user class that uses these properties OS and build it by passing it a user ID and display name that we get back from Firebase. From here, we can start building our user actions. O. The first and probably most important action is get user which will determine if the user is currently authenticated in Firebase. OAuth. If they are authenticated then we'll run an authenticated action that will update the current user data on the data store. OAuth. If they're not authenticated, then we'll run a not authenticated action that will just set a default guest user on the data store. OAuth. Then to log in or sign up user, we'll set up a Google login action and we'll also give the user the ability to log out. And we'll set one more action for auth error just to handle any errors that might come up. Now each of these actions will get its own class that implements the action interface. OAuth. It will have a read only type that corresponds to the constant above and the constructor allows it to handle a data payload if necessary. OAuth. To keep this part brief, we're just gonna follow the same exact pattern for every other action. But when building a real app, it'd be a good idea to strong type the payload for each of these actions. OAuth. And the final step is to export all these types as just a single type called all so we can use it easily in other files. Now we can move on to the reducer function that will update the state after each auth event. So we import the user actions and user class and then we set a default user that just has a null user ID and a display name of guest. In the reducer function, we pass it the state which will just be the default user if it's not defined along with the action that's being executed. From there, we set up a switch statement that's based on the action. OAuth. When we run the get user action, it's only going to change the loading state to true because we have to wait for the data to return from Firebase. OAuth, then when the user is authenticated, it's going to come with a user object so we can use that user object to update the new state. OAuth. To do that, we use the spread syntax in JavaScript, which is the three dots before each of these objects. For the not authenticated OS and we basically just do the same thing, but instead of passing it the action payload, we pass it the default guest user. OAuth. Then for the other actions, we follow the same pattern just updating the current state along with any new data and toggling the loading state as it corresponds to the action. OI. From here, we can use n g r x effects to handle the asynchronous nature of these actions. So we import effect and actions from n g r x, OS, our user class, and AngularFireAuth, and a whole bunch of RxJS operators that we'll see in use here when we start building the effects. OI. The first effect we're going to build is the 'getUser' effect which is going to tell us whether or not the user is currently authenticated. OAuth. So we use the effect decorator and then we say get user is an observable action. Then on the actions, we set it to the get user action that we defined earlier. We're not actually gonna send data with the GetUser action, but if you wanted to map the payload down, this is how you would do it here. From there, we can call switch map and then return the AngularFire auth state observable. Then I'm going to delay this function just for 2 seconds to show the loading spinner on front end. And when we receive the auth data back from Firebase, we can check to see if it exists. And if it does, we'll create a new user object using that user ID and display name and then trigger the authenticated action since we know the user is authenticated in Firebase. OAuth, but if the auth data is null, then we know the user is not logged in so we return that not authenticated action, which will update the data store with the guest user. OAuth and as a final step here, we'll add a catch operator and the only caveat here is you have to return the value as an observable. So we'll call observable of and our auth error action. Okay. So that allows us to determine whether or not the user's logged in. Now we need another effect to log in the user through Google OAuth. OAuth. So we'll start off doing the same thing, but this time we'll use the Google login action. And then we'll map that down to the payload just like we did before. OI. Um, the difference here is that when you log in with Firebase, it returns a Promise. So what we're going to do is create a function that will return this Promise and then we'll convert that into an observable. We'll define this function as soon as we're done with this effect. But what happens is it returns the credential from Firebase, which we don't actually need. Instead we can just call the getUser action and that will update the data store with the current user. And again we can catch the error here as well by setting it to an observable. OAuth. Now we can define the Google login function which is just straight from AngularFire 2. We just set the provider to Google and then we call AngularFire auth, sign in with pop up, and we're good. Then the last thing we need is a logout effect. OAuth. This is going to look almost identical to the one we just defined. The only difference being we'll set the user to not authenticated after the sign out promise resolves. OAuth. We call switch map and then map that down to an observable of the sign out promise and then map that to the user action not authenticated. Again, I apologize if that went too quick, but you can get the source code for this project on GitHub or you can get a detailed write up at angularfirebase.com. OI. At this point, the only thing left to do is put everything together in a component. So here we import store and observable and then we import our user class and user actions. Then we set a user property on the AppState interface. OAuth, then we declare user observable and inject the store in the constructor. So the first thing we need to do is determine if our user is logged in or not. OAuth. We can do that during NG OnInit by dispatching the getUser action. So first, we'll get the user observable from the store and then we'll dispatch the action. This tells us if the user is logged in or not as soon as the app component is created. From there, we just need a couple of event handlers we can attach to buttons that will log in the user or log out the user. So now we can handle the entire OSs by simply calling store dot dispatch with the corresponding action. Now we can go into the HTML and unwrap the user observable by using the async pipe and then setting it as the user template variable. Then we'll just display the username as well as the user ID. OI. If there's no user ID, we know the user is not logged in, so we can show the Google login button. So we just call the Google login method on click, and we'll use a conditional CSS class to show the loading spinner in the button when the user login process is taking place. For the logout button, we just do the exact opposite by only showing a button when the user is currently logged in. Now let's go try it out with the Redux Dev Tool plugin. We can see we first get OAuth, the Get User action, and they're not authenticated so we see the sign in with Google button. Then we go ahead and click that, and we get the Google login attempt. OI and then we get the get user action again and then we're authenticated. So now our entire Firebase auth process is a single one way data flow that's managed by the OAuth Global Data Store. That's it for NGRX with Firebase Auth. If this video helped you, please like and subscribe. And And if you wanna support the channel, consider becoming a pro subscriber at angularfirebase.com. You'll get access to 1 on 1 project consulting in our OLAC team as well as a free copy of the Angular Firebase Survival Guide. Thanks for watching and I'll see you soon.
User
user
authentication
authentication
involves
involves
some
some
of
of
the
the
most
most
critical
critical
data
data
that
that
a
a
JavaScript
javascript
app
app
will
will
have
have
to
to
manage.
manage
In
in
this
this
lesson,
lesson
we're
we're
going
going
to
to
implement
implement
Google
google
OAuth
oauth
via
via
Firebase,
firebase
but
but
we're
we're
going
going
to
to
do
do
it
it
using
using
NGRX
ngrx
and
and
the
the
one
one
way
way
data
data
flow
flow
of
of
Redux.
redux
I'd
i'd
like
like
to
to
point
point
out
out
that
that
this
this
video
video
is
is
going
going
to
to
cover
cover
a
a
lot
lot
of
of
code
code
very
very
OE
oe
quickly.
quickly
So
so
if
if
you're
you're
brand
brand
new
new
to
to
NGRX,
ngrx
check
check
out
out
some
some
of
of
the
the
links
links
in
in
the
the
description
description
for
for
an
an
easier
easier
introduction
introduction
into
into
Redux.
redux
The
the
feature
feature
we're
we're
building
building
today
today
will
will
check
check
if
if
a
a
user
user
signed
signed
in,
in
and
and
if
if
not,
not
they
they
can
can
sign
sign
in
in
via
via
Google
google
and
and
then
then
sign
sign
out.
out
And
and
all
all
this
this
will
will
be
be
kept
kept
in
in
a
a
single
single
data
data
store
store
through
through
n
n
g
g
r
r
x.
x
OI.
oi
The
the
first
first
step
step
is
is
to
to
add
add
the
the
necessary
necessary
files
files
to
to
the
the
NG
ng
module.
module
We're
we're
going
going
to
to
need
need
AngularFire
angularfire
2
2
along
along
with
with
ngrxstoreandeffects.
ngrxstoreandeffects
And
and
we're
we're
gonna
gonna
build
build
our
our
own
own
user
user
effects
effects
and
and
user
user
reducer.
reducer
So
so
we
we
add
add
everything
everything
to
to
the
the
import
import
section
section
and
and
we're
we're
good
good
to
to
go.
go
OI.
oi
The
the
next
next
step
step
is
is
to
to
model
model
our
our
user
user
data.
data
We're
we're
going
going
to
to
keep
keep
the
the
user
user
interface
interface
as
as
simple
simple
as
as
possible.
possible
It'll
it'll
just
just
have
have
a
a
user
user
ID,
id
display
display
name,
name
and
and
then
then
an
an
optional
optional
property
property
for
for
loading
loading
and
and
an
an
optional
optional
property
property
for
for
error.
error
Then
then
we'll
we'll
create
create
a
a
user
user
class
class
that
that
uses
uses
these
these
properties
properties
OS
os
and
and
build
build
it
it
by
by
passing
passing
it
it
a
a
user
user
ID
id
and
and
display
display
name
name
that
that
we
we
get
get
back
back
from
from
Firebase.
firebase
From
from
here,
here
we
we
can
can
start
start
building
building
our
our
user
user
actions.
actions
O.
o
The
the
first
first
and
and
probably
probably
most
most
important
important
action
action
is
is
get
get
user
user
which
which
will
will
determine
determine
if
if
the
the
user
user
is
is
currently
currently
authenticated
authenticated
in
in
Firebase.
firebase
OAuth.
oauth
If
if
they
they
are
are
authenticated
authenticated
then
then
we'll
we'll
run
run
an
an
authenticated
authenticated
action
action
that
that
will
will
update
update
the
the
current
current
user
user
data
data
on
on
the
the
data
data
store.
store
OAuth.
oauth
If
if
they're
they're
not
not
authenticated,
authenticated
then
then
we'll
we'll
run
run
a
a
not
not
authenticated
authenticated
action
action
that
that
will
will
just
just
set
set
a
a
default
default
guest
guest
user
user
on
on
the
the
data
data
store.
store
OAuth.
oauth
Then
then
to
to
log
log
in
in
or
or
sign
sign
up
up
user,
user
we'll
we'll
set
set
up
up
a
a
Google
google
login
login
action
action
and
and
we'll
we'll
also
also
give
give
the
the
user
user
the
the
ability
ability
to
to
log
log
out.
out
And
and
we'll
we'll
set
set
one
one
more
more
action
action
for
for
auth
auth
error
error
just
just
to
to
handle
handle
any
any
errors
errors
that
that
might
might
come
come
up.
up
Now
now
each
each
of
of
these
these
actions
actions
will
will
get
get
its
its
own
own
class
class
that
that
implements
implements
the
the
action
action
interface.
interface
OAuth.
oauth
It
it
will
will
have
have
a
a
read
read
only
only
type
type
that
that
corresponds
corresponds
to
to
the
the
constant
constant
above
above
and
and
the
the
constructor
constructor
allows
allows
it
it
to
to
handle
handle
a
a
data
data
payload
payload
if
if
necessary.
necessary
OAuth.
oauth
To
to
keep
keep
this
this
part
part
brief,
brief
we're
we're
just
just
gonna
gonna
follow
follow
the
the
same
same
exact
exact
pattern
pattern
for
for
every
every
other
other
action.
action
But
but
when
when
building
building
a
a
real
real
app,
app
it'd
it'd
be
be
a
a
good
good
idea
idea
to
to
strong
strong
type
type
the
the
payload
payload
for
for
each
each
of
of
these
these
actions.
actions
OAuth.
oauth
And
and
the
the
final
final
step
step
is
is
to
to
export
export
all
all
these
these
types
types
as
as
just
just
a
a
single
single
type
type
called
called
all
all
so
so
we
we
can
can
use
use
it
it
easily
easily
in
in
other
other
files.
files
Now
now
we
we
can
can
move
move
on
on
to
to
the
the
reducer
reducer
function
function
that
that
will
will
update
update
the
the
state
state
after
after
each
each
auth
auth
event.
event
So
so
we
we
import
import
the
the
user
user
actions
actions
and
and
user
user
class
class
and
and
then
then
we
we
set
set
a
a
default
default
user
user
that
that
just
just
has
has
a
a
null
null
user
user
ID
id
and
and
a
a
display
display
name
name
of
of
guest.
guest
In
in
the
the
reducer
reducer
function,
function
we
we
pass
pass
it
it
the
the
state
state
which
which
will
will
just
just
be
be
the
the
default
default
user
user
if
if
it's
it's
not
not
defined
defined
along
along
with
with
the
the
action
action
that's
that's
being
being
executed.
executed
From
from
there,
there
we
we
set
set
up
up
a
a
switch
switch
statement
statement
that's
that's
based
based
on
on
the
the
action.
action
OAuth.
oauth
When
when
we
we
run
run
the
the
get
get
user
user
action,
action
it's
it's
only
only
going
going
to
to
change
change
the
the
loading
loading
state
state
to
to
true
true
because
because
we
we
have
have
to
to
wait
wait
for
for
the
the
data
data
to
to
return
return
from
from
Firebase.
firebase
OAuth,
oauth
then
then
when
when
the
the
user
user
is
is
authenticated,
authenticated
it's
it's
going
going
to
to
come
come
with
with
a
a
user
user
object
object
so
so
we
we
can
can
use
use
that
that
user
user
object
object
to
to
update
update
the
the
new
new
state.
state
OAuth.
oauth
To
to
do
do
that,
that
we
we
use
use
the
the
spread
spread
syntax
syntax
in
in
JavaScript,
javascript
which
which
is
is
the
the
three
three
dots
dots
before
before
each
each
of
of
these
these
objects.
objects
For
for
the
the
not
not
authenticated
authenticated
OS
os
and
and
we
we
basically
basically
just
just
do
do
the
the
same
same
thing,
thing
but
but
instead
instead
of
of
passing
passing
it
it
the
the
action
action
payload,
payload
we
we
pass
pass
it
it
the
the
default
default
guest
guest
user.
user
OAuth.
oauth
Then
then
for
for
the
the
other
other
actions,
actions
we
we
follow
follow
the
the
same
same
pattern
pattern
just
just
updating
updating
the
the
current
current
state
state
along
along
with
with
any
any
new
new
data
data
and
and
toggling
toggling
the
the
loading
loading
state
state
as
as
it
it
corresponds
corresponds
to
to
the
the
action.
action
OI.
oi
From
from
here,
here
we
we
can
can
use
use
n
n
g
g
r
r
x
x
effects
effects
to
to
handle
handle
the
the
asynchronous
asynchronous
nature
nature
of
of
these
these
actions.
actions
So
so
we
we
import
import
effect
effect
and
and
actions
actions
from
from
n
n
g
g
r
r
x,
x
OS,
os
our
our
user
user
class,
class
and
and
AngularFireAuth,
angularfireauth
and
and
a
a
whole
whole
bunch
bunch
of
of
RxJS
rxjs
operators
operators
that
that
we'll
we'll
see
see
in
in
use
use
here
here
when
when
we
we
start
start
building
building
the
the
effects.
effects
OI.
oi
The
the
first
first
effect
effect
we're
we're
going
going
to
to
build
build
is
is
the
the
'getUser'
'getuser'
effect
effect
which
which
is
is
going
going
to
to
tell
tell
us
us
whether
whether
or
or
not
not
the
the
user
user
is
is
currently
currently
authenticated.
authenticated
OAuth.
oauth
So
so
we
we
use
use
the
the
effect
effect
decorator
decorator
and
and
then
then
we
we
say
say
get
get
user
user
is
is
an
an
observable
observable
action.
action
Then
then
on
on
the
the
actions,
actions
we
we
set
set
it
it
to
to
the
the
get
get
user
user
action
action
that
that
we
we
defined
defined
earlier.
earlier
We're
we're
not
not
actually
actually
gonna
gonna
send
send
data
data
with
with
the
the
GetUser
getuser
action,
action
but
but
if
if
you
you
wanted
wanted
to
to
map
map
the
the
payload
payload
down,
down
this
this
is
is
how
how
you
you
would
would
do
do
it
it
here.
here
From
from
there,
there
we
we
can
can
call
call
switch
switch
map
map
and
and
then
then
return
return
the
the
AngularFire
angularfire
auth
auth
state
state
observable.
observable
Then
then
I'm
i'm
going
going
to
to
delay
delay
this
this
function
function
just
just
for
for
2
2
seconds
seconds
to
to
show
show
the
the
loading
loading
spinner
spinner
on
on
front
front
end.
end
And
and
when
when
we
we
receive
receive
the
the
auth
auth
data
data
back
back
from
from
Firebase,
firebase
we
we
can
can
check
check
to
to
see
see
if
if
it
it
exists.
exists
And
and
if
if
it
it
does,
does
we'll
we'll
create
create
a
a
new
new
user
user
object
object
using
using
that
that
user
user
ID
id
and
and
display
display
name
name
and
and
then
then
trigger
trigger
the
the
authenticated
authenticated
action
action
since
since
we
we
know
know
the
the
user
user
is
is
authenticated
authenticated
in
in
Firebase.
firebase
OAuth,
oauth
but
but
if
if
the
the
auth
auth
data
data
is
is
null,
null
then
then
we
we
know
know
the
the
user
user
is
is
not
not
logged
logged
in
in
so
so
we
we
return
return
that
that
not
not
authenticated
authenticated
action,
action
which
which
will
will
update
update
the
the
data
data
store
store
with
with
the
the
guest
guest
user.
user
OAuth
oauth
and
and
as
as
a
a
final
final
step
step
here,
here
we'll
we'll
add
add
a
a
catch
catch
operator
operator
and
and
the
the
only
only
caveat
caveat
here
here
is
is
you
you
have
have
to
to
return
return
the
the
value
value
as
as
an
an
observable.
observable
So
so
we'll
we'll
call
call
observable
observable
of
of
and
and
our
our
auth
auth
error
error
action.
action
Okay.
okay
So
so
that
that
allows
allows
us
us
to
to
determine
determine
whether
whether
or
or
not
not
the
the
user's
user's
logged
logged
in.
in
Now
now
we
we
need
need
another
another
effect
effect
to
to
log
log
in
in
the
the
user
user
through
through
Google
google
OAuth.
oauth
OAuth.
oauth
So
so
we'll
we'll
start
start
off
off
doing
doing
the
the
same
same
thing,
thing
but
but
this
this
time
time
we'll
we'll
use
use
the
the
Google
google
login
login
action.
action
And
and
then
then
we'll
we'll
map
map
that
that
down
down
to
to
the
the
payload
payload
just
just
like
like
we
we
did
did
before.
before
OI.
oi
Um,
um
the
the
difference
difference
here
here
is
is
that
that
when
when
you
you
log
log
in
in
with
with
Firebase,
firebase
it
it
returns
returns
a
a
Promise.
promise
So
so
what
what
we're
we're
going
going
to
to
do
do
is
is
create
create
a
a
function
function
that
that
will
will
return
return
this
this
Promise
promise
and
and
then
then
we'll
we'll
convert
convert
that
that
into
into
an
an
observable.
observable
We'll
we'll
define
define
this
this
function
function
as
as
soon
soon
as
as
we're
we're
done
done
with
with
this
this
effect.
effect
But
but
what
what
happens
happens
is
is
it
it
returns
returns
the
the
credential
credential
from
from
Firebase,
firebase
which
which
we
we
don't
don't
actually
actually
need.
need
Instead
instead
we
we
can
can
just
just
call
call
the
the
getUser
getuser
action
action
and
and
that
that
will
will
update
update
the
the
data
data
store
store
with
with
the
the
current
current
user.
user
And
and
again
again
we
we
can
can
catch
catch
the
the
error
error
here
here
as
as
well
well
by
by
setting
setting
it
it
to
to
an
an
observable.
observable
OAuth.
oauth
Now
now
we
we
can
can
define
define
the
the
Google
google
login
login
function
function
which
which
is
is
just
just
straight
straight
from
from
AngularFire
angularfire
2.
2
We
we
just
just
set
set
the
the
provider
provider
to
to
Google
google
and
and
then
then
we
we
call
call
AngularFire
angularfire
auth,
auth
sign
sign
in
in
with
with
pop
pop
up,
up
and
and
we're
we're
good.
good
Then
then
the
the
last
last
thing
thing
we
we
need
need
is
is
a
a
logout
logout
effect.
effect
OAuth.
oauth
This
this
is
is
going
going
to
to
look
look
almost
almost
identical
identical
to
to
the
the
one
one
we
we
just
just
defined.
defined
The
the
only
only
difference
difference
being
being
we'll
we'll
set
set
the
the
user
user
to
to
not
not
authenticated
authenticated
after
after
the
the
sign
sign
out
out
promise
promise
resolves.
resolves
OAuth.
oauth
We
we
call
call
switch
switch
map
map
and
and
then
then
map
map
that
that
down
down
to
to
an
an
observable
observable
of
of
the
the
sign
sign
out
out
promise
promise
and
and
then
then
map
map
that
that
to
to
the
the
user
user
action
action
not
not
authenticated.
authenticated
Again,
again
I
i
apologize
apologize
if
if
that
that
went
went
too
too
quick,
quick
but
but
you
you
can
can
get
get
the
the
source
source
code
code
for
for
this
this
project
project
on
on
GitHub
github
or
or
you
you
can
can
get
get
a
a
detailed
detailed
write
write
up
up
at
at
angularfirebase.com.
angularfirebase.com
OI.
oi
At
at
this
this
point,
point
the
the
only
only
thing
thing
left
left
to
to
do
do
is
is
put
put
everything
everything
together
together
in
in
a
a
component.
component
So
so
here
here
we
we
import
import
store
store
and
and
observable
observable
and
and
then
then
we
we
import
import
our
our
user
user
class
class
and
and
user
user
actions.
actions
Then
then
we
we
set
set
a
a
user
user
property
property
on
on
the
the
AppState
appstate
interface.
interface
OAuth,
oauth
then
then
we
we
declare
declare
user
user
observable
observable
and
and
inject
inject
the
the
store
store
in
in
the
the
constructor.
constructor
So
so
the
the
first
first
thing
thing
we
we
need
need
to
to
do
do
is
is
determine
determine
if
if
our
our
user
user
is
is
logged
logged
in
in
or
or
not.
not
OAuth.
oauth
We
we
can
can
do
do
that
that
during
during
NG
ng
OnInit
oninit
by
by
dispatching
dispatching
the
the
getUser
getuser
action.
action
So
so
first,
first
we'll
we'll
get
get
the
the
user
user
observable
observable
from
from
the
the
store
store
and
and
then
then
we'll
we'll
dispatch
dispatch
the
the
action.
action
This
this
tells
tells
us
us
if
if
the
the
user
user
is
is
logged
logged
in
in
or
or
not
not
as
as
soon
soon
as
as
the
the
app
app
component
component
is
is
created.
created
From
from
there,
there
we
we
just
just
need
need
a
a
couple
couple
of
of
event
event
handlers
handlers
we
we
can
can
attach
attach
to
to
buttons
buttons
that
that
will
will
log
log
in
in
the
the
user
user
or
or
log
log
out
out
the
the
user.
user
So
so
now
now
we
we
can
can
handle
handle
the
the
entire
entire
OSs
oss
by
by
simply
simply
calling
calling
store
store
dot
dot
dispatch
dispatch
with
with
the
the
corresponding
corresponding
action.
action
Now
now
we
we
can
can
go
go
into
into
the
the
HTML
html
and
and
unwrap
unwrap
the
the
user
user
observable
observable
by
by
using
using
the
the
async
async
pipe
pipe
and
and
then
then
setting
setting
it
it
as
as
the
the
user
user
template
template
variable.
variable
Then
then
we'll
we'll
just
just
display
display
the
the
username
username
as
as
well
well
as
as
the
the
user
user
ID.
id
OI.
oi
If
if
there's
there's
no
no
user
user
ID,
id
we
we
know
know
the
the
user
user
is
is
not
not
logged
logged
in,
in
so
so
we
we
can
can
show
show
the
the
Google
google
login
login
button.
button
So
so
we
we
just
just
call
call
the
the
Google
google
login
login
method
method
on
on
click,
click
and
and
we'll
we'll
use
use
a
a
conditional
conditional
CSS
css
class
class
to
to
show
show
the
the
loading
loading
spinner
spinner
in
in
the
the
button
button
when
when
the
the
user
user
login
login
process
process
is
is
taking
taking
place.
place
For
for
the
the
logout
logout
button,
button
we
we
just
just
do
do
the
the
exact
exact
opposite
opposite
by
by
only
only
showing
showing
a
a
button
button
when
when
the
the
user
user
is
is
currently
currently
logged
logged
in.
in
Now
now
let's
let's
go
go
try
try
it
it
out
out
with
with
the
the
Redux
redux
Dev
dev
Tool
tool
plugin.
plugin
We
we
can
can
see
see
we
we
first
first
get
get
OAuth,
oauth
the
the
Get
get
User
user
action,
action
and
and
they're
they're
not
not
authenticated
authenticated
so
so
we
we
see
see
the
the
sign
sign
in
in
with
with
Google
google
button.
button
Then
then
we
we
go
go
ahead
ahead
and
and
click
click
that,
that
and
and
we
we
get
get
the
the
Google
google
login
login
attempt.
attempt
OI
oi
and
and
then
then
we
we
get
get
the
the
get
get
user
user
action
action
again
again
and
and
then
then
we're
we're
authenticated.
authenticated
So
so
now
now
our
our
entire
entire
Firebase
firebase
auth
auth
process
process
is
is
a
a
single
single
one
one
way
way
data
data
flow
flow
that's
that's
managed
managed
by
by
the
the
OAuth
oauth
Global
global
Data
data
Store.
store
That's
that's
it
it
for
for
NGRX
ngrx
with
with
Firebase
firebase
Auth.
auth
If
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
and
and
subscribe.
subscribe
And
and
And
and
if
if
you
you
wanna
wanna
support
support
the
the
channel,
channel
consider
consider
becoming
becoming
a
a
pro
pro
subscriber
subscriber
at
at
angularfirebase.com.
angularfirebase.com
You'll
you'll
get
get
access
access
to
to
1
1
on
on
1
1
project
project
consulting
consulting
in
in
our
our
OLAC
olac
team
team
as
as
well
well
as
as
a
a
free
free
copy
copy
of
of
the
the
Angular
angular
Firebase
firebase
Survival
survival
Guide.
guide
Thanks
thanks
for
for
watching
watching
and
and
I'll
i'll
see
see
you
you
soon.
soon
success
The speaker explains the process of implementing GoogleFinancial viaese and using NGRX for Redux. They outline the steps involved in creating a user interface, building a user class, and setting up user actions. They also discuss the use of Angulareleration and the implementation of a transform function for updating user data. The speaker explains the process of building an app, import user actions, and setting a default user. They then discuss the process of logging in through Google and setting the provider to Google, and provide a link for a detailed write-up on angular Angelo.com. They also discuss the use of a conditional CSS class to show the loading spinner in the button when the user login process is taking place and mention a free copy of the Angular appointed guide and a promotion for the merchant channel.
Angular Ngrx with Firebase Google OAuth User Authentication
User authentication involves some of the most critical data that a JavaScript app will have to manage. In this lesson, we're going to implement Google OAuth via Firebase, but we're going to do it using NGRX and the one way data flow of Redux. I'd like to point out that this video is going to cover a lot of code very OE quickly. So if you're brand new to NGRX, check out some of the links in the description for an easier introduction into Redux. The feature we're building today will check if a user signed in, and if not, they can sign in via Google and then sign out. And all this will be kept in a single data store through n g r x. OI. The first step is to add the necessary files to the NG module. We're going to need AngularFire 2 along with ngrxstoreandeffects. And we're gonna build our own user effects and user reducer. So we add everything to the import section and we're good to go. OI. The next step is to model our user data. We're going to keep the user interface as simple as possible. It'll just have a user ID, display name, and then an optional property for loading and an optional property for error. Then we'll create a user class that uses these properties OS and build it by passing it a user ID and display name that we get back from Firebase. From here, we can start building our user actions. O. The first and probably most important action is get user which will determine if the user is currently authenticated in Firebase. OAuth. If they are authenticated then we'll run an authenticated action that will update the current user data on the data store. OAuth. If they're not authenticated, then we'll run a not authenticated action that will just set a default guest user on the data store. OAuth. Then to log in or sign up user, we'll set up a Google login action and we'll also give the user the ability to log out. And we'll set one more action for auth error just to handle any errors that might come up. Now each of these actions will get its own class that implements the action interface. OAuth. It will have a read only type that corresponds to the constant above and the constructor allows it to handle a data payload if necessary. OAuth. To keep this part brief, we're just gonna follow the same exact pattern for every other action. But when building a real app, it'd be a good idea to strong type the payload for each of these actions. OAuth. And the final step is to export all these types as just a single type called all so we can use it easily in other files. Now we can move on to the reducer function that will update the state after each auth event. So we import the user actions and user class and then we set a default user that just has a null user ID and a display name of guest. In the reducer function, we pass it the state which will just be the default user if it's not defined along with the action that's being executed. From there, we set up a switch statement that's based on the action. OAuth. When we run the get user action, it's only going to change the loading state to true because we have to wait for the data to return from Firebase. OAuth, then when the user is authenticated, it's going to come with a user object so we can use that user object to update the new state. OAuth. To do that, we use the spread syntax in JavaScript, which is the three dots before each of these objects. For the not authenticated OS and we basically just do the same thing, but instead of passing it the action payload, we pass it the default guest user. OAuth. Then for the other actions, we follow the same pattern just updating the current state along with any new data and toggling the loading state as it corresponds to the action. OI. From here, we can use n g r x effects to handle the asynchronous nature of these actions. So we import effect and actions from n g r x, OS, our user class, and AngularFireAuth, and a whole bunch of RxJS operators that we'll see in use here when we start building the effects. OI. The first effect we're going to build is the 'getUser' effect which is going to tell us whether or not the user is currently authenticated. OAuth. So we use the effect decorator and then we say get user is an observable action. Then on the actions, we set it to the get user action that we defined earlier. We're not actually gonna send data with the GetUser action, but if you wanted to map the payload down, this is how you would do it here. From there, we can call switch map and then return the AngularFire auth state observable. Then I'm going to delay this function just for 2 seconds to show the loading spinner on front end. And when we receive the auth data back from Firebase, we can check to see if it exists. And if it does, we'll create a new user object using that user ID and display name and then trigger the authenticated action since we know the user is authenticated in Firebase. OAuth, but if the auth data is null, then we know the user is not logged in so we return that not authenticated action, which will update the data store with the guest user. OAuth and as a final step here, we'll add a catch operator and the only caveat here is you have to return the value as an observable. So we'll call observable of and our auth error action. Okay. So that allows us to determine whether or not the user's logged in. Now we need another effect to log in the user through Google OAuth. OAuth. So we'll start off doing the same thing, but this time we'll use the Google login action. And then we'll map that down to the payload just like we did before. OI. Um, the difference here is that when you log in with Firebase, it returns a Promise. So what we're going to do is create a function that will return this Promise and then we'll convert that into an observable. We'll define this function as soon as we're done with this effect. But what happens is it returns the credential from Firebase, which we don't actually need. Instead we can just call the getUser action and that will update the data store with the current user. And again we can catch the error here as well by setting it to an observable. OAuth. Now we can define the Google login function which is just straight from AngularFire 2. We just set the provider to Google and then we call AngularFire auth, sign in with pop up, and we're good. Then the last thing we need is a logout effect. OAuth. This is going to look almost identical to the one we just defined. The only difference being we'll set the user to not authenticated after the sign out promise resolves. OAuth. We call switch map and then map that down to an observable of the sign out promise and then map that to the user action not authenticated. Again, I apologize if that went too quick, but you can get the source code for this project on GitHub or you can get a detailed write up at angularfirebase.com. OI. At this point, the only thing left to do is put everything together in a component. So here we import store and observable and then we import our user class and user actions. Then we set a user property on the AppState interface. OAuth, then we declare user observable and inject the store in the constructor. So the first thing we need to do is determine if our user is logged in or not. OAuth. We can do that during NG OnInit by dispatching the getUser action. So first, we'll get the user observable from the store and then we'll dispatch the action. This tells us if the user is logged in or not as soon as the app component is created. From there, we just need a couple of event handlers we can attach to buttons that will log in the user or log out the user. So now we can handle the entire OSs by simply calling store dot dispatch with the corresponding action. Now we can go into the HTML and unwrap the user observable by using the async pipe and then setting it as the user template variable. Then we'll just display the username as well as the user ID. OI. If there's no user ID, we know the user is not logged in, so we can show the Google login button. So we just call the Google login method on click, and we'll use a conditional CSS class to show the loading spinner in the button when the user login process is taking place. For the logout button, we just do the exact opposite by only showing a button when the user is currently logged in. Now let's go try it out with the Redux Dev Tool plugin. We can see we first get OAuth, the Get User action, and they're not authenticated so we see the sign in with Google button. Then we go ahead and click that, and we get the Google login attempt. OI and then we get the get user action again and then we're authenticated. So now our entire Firebase auth process is a single one way data flow that's managed by the OAuth Global Data Store. That's it for NGRX with Firebase Auth. If this video helped you, please like and subscribe. And And if you wanna support the channel, consider becoming a pro subscriber at angularfirebase.com. You'll get access to 1 on 1 project consulting in our OLAC team as well as a free copy of the Angular Firebase Survival Guide. Thanks for watching and I'll see you soon.
The speaker explains the process of implementing GoogleFinancial viaese and using NGRX for Redux. They outline the steps involved in creating a user interface, building a user class, and setting up user actions. They also discuss the use of Angulareleration and the implementation of a transform function for updating user data. The speaker explains the process of building an app, import user actions, and setting a default user. They then discuss the process of logging in through Google and setting the provider to Google, and provide a link for a detailed write-up on angular Angelo.com. They also discuss the use of a conditional CSS class to show the loading spinner in the button when the user login process is taking place and mention a free copy of the Angular appointed guide and a promotion for the merchant channel.

        [INST]
        You are youtuber called Fireship you make engaging high-intensity and entertaining coding tutorials and tech news. 
        you covers a wide range of topics relevant to programmers, aiming to help them learn and improve their skills quickly.
        
        Given the title of the video : Angular Ngrx with Firebase Google OAuth User Authentication 
        and a small summary : The speaker explains the process of implementing GoogleFinancial viaese and using NGRX for Redux. They outline the steps involved in creating a user interface, building a user class, and setting up user actions. They also discuss the use of Angulareleration and the implementation of a transform function for updating user data. The speaker explains the process of building an app, import user actions, and setting a default user. They then discuss the process of logging in through Google and setting the provider to Google, and provide a link for a detailed write-up on angular Angelo.com. They also discuss the use of a conditional CSS class to show the loading spinner in the button when the user login process is taking place and mention a free copy of the Angular appointed guide and a promotion for the merchant channel.
        [/INST]
        
        Generate the video : User authentication involves some of the most critical data that a JavaScript app will have to manage. In this lesson, we're going to implement Google OAuth via Firebase, but we're going to do it using NGRX and the one way data flow of Redux. I'd like to point out that this video is going to cover a lot of code very OE quickly. So if you're brand new to NGRX, check out some of the links in the description for an easier introduction into Redux. The feature we're building today will check if a user signed in, and if not, they can sign in via Google and then sign out. And all this will be kept in a single data store through n g r x. OI. The first step is to add the necessary files to the NG module. We're going to need AngularFire 2 along with ngrxstoreandeffects. And we're gonna build our own user effects and user reducer. So we add everything to the import section and we're good to go. OI. The next step is to model our user data. We're going to keep the user interface as simple as possible. It'll just have a user ID, display name, and then an optional property for loading and an optional property for error. Then we'll create a user class that uses these properties OS and build it by passing it a user ID and display name that we get back from Firebase. From here, we can start building our user actions. O. The first and probably most important action is get user which will determine if the user is currently authenticated in Firebase. OAuth. If they are authenticated then we'll run an authenticated action that will update the current user data on the data store. OAuth. If they're not authenticated, then we'll run a not authenticated action that will just set a default guest user on the data store. OAuth. Then to log in or sign up user, we'll set up a Google login action and we'll also give the user the ability to log out. And we'll set one more action for auth error just to handle any errors that might come up. Now each of these actions will get its own class that implements the action interface. OAuth. It will have a read only type that corresponds to the constant above and the constructor allows it to handle a data payload if necessary. OAuth. To keep this part brief, we're just gonna follow the same exact pattern for every other action. But when building a real app, it'd be a good idea to strong type the payload for each of these actions. OAuth. And the final step is to export all these types as just a single type called all so we can use it easily in other files. Now we can move on to the reducer function that will update the state after each auth event. So we import the user actions and user class and then we set a default user that just has a null user ID and a display name of guest. In the reducer function, we pass it the state which will just be the default user if it's not defined along with the action that's being executed. From there, we set up a switch statement that's based on the action. OAuth. When we run the get user action, it's only going to change the loading state to true because we have to wait for the data to return from Firebase. OAuth, then when the user is authenticated, it's going to come with a user object so we can use that user object to update the new state. OAuth. To do that, we use the spread syntax in JavaScript, which is the three dots before each of these objects. For the not authenticated OS and we basically just do the same thing, but instead of passing it the action payload, we pass it the default guest user. OAuth. Then for the other actions, we follow the same pattern just updating the current state along with any new data and toggling the loading state as it corresponds to the action. OI. From here, we can use n g r x effects to handle the asynchronous nature of these actions. So we import effect and actions from n g r x, OS, our user class, and AngularFireAuth, and a whole bunch of RxJS operators that we'll see in use here when we start building the effects. OI. The first effect we're going to build is the 'getUser' effect which is going to tell us whether or not the user is currently authenticated. OAuth. So we use the effect decorator and then we say get user is an observable action. Then on the actions, we set it to the get user action that we defined earlier. We're not actually gonna send data with the GetUser action, but if you wanted to map the payload down, this is how you would do it here. From there, we can call switch map and then return the AngularFire auth state observable. Then I'm going to delay this function just for 2 seconds to show the loading spinner on front end. And when we receive the auth data back from Firebase, we can check to see if it exists. And if it does, we'll create a new user object using that user ID and display name and then trigger the authenticated action since we know the user is authenticated in Firebase. OAuth, but if the auth data is null, then we know the user is not logged in so we return that not authenticated action, which will update the data store with the guest user. OAuth and as a final step here, we'll add a catch operator and the only caveat here is you have to return the value as an observable. So we'll call observable of and our auth error action. Okay. So that allows us to determine whether or not the user's logged in. Now we need another effect to log in the user through Google OAuth. OAuth. So we'll start off doing the same thing, but this time we'll use the Google login action. And then we'll map that down to the payload just like we did before. OI. Um, the difference here is that when you log in with Firebase, it returns a Promise. So what we're going to do is create a function that will return this Promise and then we'll convert that into an observable. We'll define this function as soon as we're done with this effect. But what happens is it returns the credential from Firebase, which we don't actually need. Instead we can just call the getUser action and that will update the data store with the current user. And again we can catch the error here as well by setting it to an observable. OAuth. Now we can define the Google login function which is just straight from AngularFire 2. We just set the provider to Google and then we call AngularFire auth, sign in with pop up, and we're good. Then the last thing we need is a logout effect. OAuth. This is going to look almost identical to the one we just defined. The only difference being we'll set the user to not authenticated after the sign out promise resolves. OAuth. We call switch map and then map that down to an observable of the sign out promise and then map that to the user action not authenticated. Again, I apologize if that went too quick, but you can get the source code for this project on GitHub or you can get a detailed write up at angularfirebase.com. OI. At this point, the only thing left to do is put everything together in a component. So here we import store and observable and then we import our user class and user actions. Then we set a user property on the AppState interface. OAuth, then we declare user observable and inject the store in the constructor. So the first thing we need to do is determine if our user is logged in or not. OAuth. We can do that during NG OnInit by dispatching the getUser action. So first, we'll get the user observable from the store and then we'll dispatch the action. This tells us if the user is logged in or not as soon as the app component is created. From there, we just need a couple of event handlers we can attach to buttons that will log in the user or log out the user. So now we can handle the entire OSs by simply calling store dot dispatch with the corresponding action. Now we can go into the HTML and unwrap the user observable by using the async pipe and then setting it as the user template variable. Then we'll just display the username as well as the user ID. OI. If there's no user ID, we know the user is not logged in, so we can show the Google login button. So we just call the Google login method on click, and we'll use a conditional CSS class to show the loading spinner in the button when the user login process is taking place. For the logout button, we just do the exact opposite by only showing a button when the user is currently logged in. Now let's go try it out with the Redux Dev Tool plugin. We can see we first get OAuth, the Get User action, and they're not authenticated so we see the sign in with Google button. Then we go ahead and click that, and we get the Google login attempt. OI and then we get the get user action again and then we're authenticated. So now our entire Firebase auth process is a single one way data flow that's managed by the OAuth Global Data Store. That's it for NGRX with Firebase Auth. If this video helped you, please like and subscribe. And And if you wanna support the channel, consider becoming a pro subscriber at angularfirebase.com. You'll get access to 1 on 1 project consulting in our OLAC team as well as a free copy of the Angular Firebase Survival Guide. Thanks for watching and I'll see you soon.
        