1
00:00:00,210 --> 00:00:06,390
In this section, we're going to register and authenticate the user authentication is not a feature

2
00:00:06,390 --> 00:00:12,600
exclusively handled by the front end, it's a shared responsibility between the front end and back end.

3
00:00:12,930 --> 00:00:13,860
That's a problem.

4
00:00:14,130 --> 00:00:16,560
Angular is a client side framework.

5
00:00:16,890 --> 00:00:20,460
Every line of code we've written is meant to be run in the browser.

6
00:00:20,670 --> 00:00:24,540
We haven't had to worry about the back end thanks to web pack.

7
00:00:24,630 --> 00:00:27,990
We're able to deliver our app by a development server.

8
00:00:28,470 --> 00:00:30,720
With that being said, it's not enough.

9
00:00:31,020 --> 00:00:35,100
The server generated by a web pack can't perform other tasks.

10
00:00:35,400 --> 00:00:42,330
It doesn't have the capabilities to authenticate users, handle file uploads or handle complex requests.

11
00:00:42,690 --> 00:00:47,730
We're going to need something more powerful before jumping into authentication.

12
00:00:47,880 --> 00:00:49,710
We will need to set up a server.

13
00:00:50,040 --> 00:00:55,110
Unfortunately, we don't have the time to go over the concepts of back and development.

14
00:00:55,470 --> 00:00:58,860
It's a field that requires dozens of hours to get into.

15
00:00:59,190 --> 00:01:00,420
Our time is limited.

16
00:01:00,720 --> 00:01:05,730
Luckily, there's a solution available for creating a server within five minutes.

17
00:01:08,330 --> 00:01:11,480
The solution I'm referring to is called Firebase.

18
00:01:11,810 --> 00:01:14,930
Firebase was initially introduced as a database.

19
00:01:15,290 --> 00:01:18,350
Google acquired it a few years after its release.

20
00:01:18,680 --> 00:01:23,120
As a result, the product has experienced a drastic transformation.

21
00:01:23,450 --> 00:01:28,370
It's gone from a database to a suite of back end tools for mobile applications.

22
00:01:28,670 --> 00:01:31,070
It doesn't have to be used for mobile apps.

23
00:01:31,310 --> 00:01:33,680
You can also use it for web applications.

24
00:01:34,250 --> 00:01:36,920
So what do I mean by back end solution?

25
00:01:37,220 --> 00:01:44,270
Firebase will store your data, authenticate users, store files, provide analytics and much more.

26
00:01:44,660 --> 00:01:49,040
We can completely avoid learning a new language for generating a web server.

27
00:01:49,460 --> 00:01:51,770
Firebase is extremely popular.

28
00:01:52,100 --> 00:01:58,040
Companies like Twitch, Alibaba and the New York Times use Firebase in some capacity.

29
00:01:58,400 --> 00:02:03,370
In my opinion, it's a great solution for a quickly prototyping and application.

30
00:02:04,010 --> 00:02:10,460
Firebase is more than suitable for powering our application, even though we will be using Firebase.

31
00:02:10,669 --> 00:02:14,210
We will discuss how authentication works under the hood.

32
00:02:14,630 --> 00:02:16,790
A basic understanding will suffice.

33
00:02:17,420 --> 00:02:21,320
The first step to using Firebase is to create a new project.

34
00:02:21,680 --> 00:02:24,290
It's completely free to create a project.

35
00:02:24,680 --> 00:02:29,180
In the resource section of this lecture, I provide a link to Firebase.

36
00:02:29,480 --> 00:02:34,670
You will need to log into your Google account to use Firebase at the top right corner.

37
00:02:34,820 --> 00:02:36,980
Click the Go to console button.

38
00:02:39,550 --> 00:02:42,820
You will be presented with the option to add a new project.

39
00:02:43,060 --> 00:02:43,750
Click on it.

40
00:02:44,080 --> 00:02:50,590
A pop up will appear asking for more information about our new project or going to call our project

41
00:02:50,590 --> 00:02:51,190
clips.

42
00:02:53,730 --> 00:02:59,340
Any name will do, but it should be relevant and it will be generated for our project.

43
00:02:59,670 --> 00:03:05,970
We have the option of assigning a custom ID by clicking on the pencil icon for our case.

44
00:03:06,210 --> 00:03:08,790
The auto generated ID will work fine.

45
00:03:09,120 --> 00:03:11,460
Let's continue on to the next page.

46
00:03:12,000 --> 00:03:16,530
You may be asked if you'd like to integrate Google Analytics into the project.

47
00:03:16,890 --> 00:03:20,130
We're not going to use Google Analytics for this project.

48
00:03:20,370 --> 00:03:23,760
However, you're more than welcome to enable it if you'd like.

49
00:03:24,030 --> 00:03:27,150
I'm going to disable this option for this project.

50
00:03:27,750 --> 00:03:31,440
There's not much configuration we have to perform out of the box.

51
00:03:31,740 --> 00:03:34,560
The setup process is an absolute breeze.

52
00:03:34,890 --> 00:03:38,100
We can tell Firebase to start creating the project.

53
00:03:38,460 --> 00:03:41,220
This preparation may take a while for some of you.

54
00:03:41,400 --> 00:03:42,540
Just be patient.

55
00:03:46,490 --> 00:03:52,280
Once everything has been prepped, you can proceed to view your application right away.

56
00:03:52,460 --> 00:03:56,870
We will be given a full fledged dashboard for managing our application.

57
00:03:57,230 --> 00:04:02,360
It can be overwhelming, but I'll be sure to guide you through every relevant feature.

58
00:04:03,050 --> 00:04:07,370
After creating the new application, we are going to turn on the database.

59
00:04:07,640 --> 00:04:11,720
A database will allow us to store user and video information.

60
00:04:12,050 --> 00:04:16,850
They're both critical pieces of information for our app on the sidebar.

61
00:04:16,910 --> 00:04:19,430
There are various sections in our dashboard.

62
00:04:19,760 --> 00:04:22,520
The most crucial section is called built.

63
00:04:22,910 --> 00:04:27,080
This section contains a list of tools available for our project.

64
00:04:27,410 --> 00:04:31,040
We will be spending the majority of our time under this section.

65
00:04:31,610 --> 00:04:38,420
We're presented with two options for creating a database called Fire Store and Real Time Database.

66
00:04:38,840 --> 00:04:41,750
Fire Store is Firebase Bases new database.

67
00:04:42,110 --> 00:04:43,310
It's the better option.

68
00:04:43,580 --> 00:04:46,700
It comes packed with more features and is scalable.

69
00:04:47,000 --> 00:04:51,200
The real time database was the original solution the team came up with.

70
00:04:51,500 --> 00:04:55,430
It's available for teams that prefer to work with the older version.

71
00:04:56,030 --> 00:04:59,720
For this course, we will be using the Firestone database.

72
00:05:00,020 --> 00:05:01,040
Click on this link.

73
00:05:01,400 --> 00:05:05,900
We will be taken to a page with information on getting started with Fire Store.

74
00:05:06,230 --> 00:05:08,600
There is a button that says Create database.

75
00:05:08,870 --> 00:05:09,620
Click on it.

76
00:05:12,310 --> 00:05:16,870
A model will appear to prompt us to select a set of security rules.

77
00:05:17,200 --> 00:05:21,870
There are two sets called Production and Test Production Mode.

78
00:05:21,880 --> 00:05:24,190
It will create a set of strict rules.

79
00:05:24,490 --> 00:05:29,410
For example, only authorized users can read or write to the database.

80
00:05:29,740 --> 00:05:33,520
This option is perfect for apps that are ready to ship to production.

81
00:05:34,120 --> 00:05:40,240
We're currently in the development phase of the application, so the test mode will be the better option.

82
00:05:40,690 --> 00:05:44,920
This mode will allow all users to read and write to our database.

83
00:05:45,220 --> 00:05:47,800
It's not a secure option, but that's all right.

84
00:05:48,130 --> 00:05:54,700
No one knows about our application besides us when we near the completion of our application.

85
00:05:54,850 --> 00:05:57,100
We are going to revisit the rules.

86
00:05:57,430 --> 00:06:04,810
The rules will be revised to be stricter than their current state select test mode and then click next.

87
00:06:07,370 --> 00:06:13,430
After selecting a set of rules, we will be asked to select a location for our database.

88
00:06:13,790 --> 00:06:16,130
This is an important option to consider.

89
00:06:16,550 --> 00:06:19,670
Firebase offers locations all over the world.

90
00:06:20,000 --> 00:06:24,230
I recommend picking a location that's close to you or your users.

91
00:06:24,560 --> 00:06:28,190
The closer a database is, the faster the response time.

92
00:06:28,550 --> 00:06:32,960
By default, Firebase will try to pick a location closest to you.

93
00:06:33,290 --> 00:06:38,600
If you don't like the location, we have the opportunity to change it to a different location.

94
00:06:38,930 --> 00:06:41,960
I prefer the default, so I'll leave it as is.

95
00:06:42,560 --> 00:06:43,580
Click Enable.

96
00:06:43,820 --> 00:06:46,640
Firebase will begin creating our database.

97
00:06:46,880 --> 00:06:49,070
This process may take a few moments.

98
00:06:54,100 --> 00:06:59,110
We've successfully created our database currently, the database is empty.

99
00:06:59,470 --> 00:07:02,200
We will start adding data in a future section.

100
00:07:02,470 --> 00:07:07,330
In the next lecture, we're going to review the rules generated by Firebase.