1
00:00:00,540 --> 00:00:05,250
In the last video we spoke about some of the challenges around getting our publishable key inside of

2
00:00:05,250 --> 00:00:07,550
the client side of our application.

3
00:00:07,650 --> 00:00:12,840
Now as a reminder the client side only cares about the publishable key here it doesn't care about the

4
00:00:12,840 --> 00:00:17,070
secret key and the publishable key literally means publishable.

5
00:00:17,070 --> 00:00:22,350
In other words this key right here can really be exposed to the outside world and it will.

6
00:00:22,380 --> 00:00:26,760
Every single time a user downloads or re-act application which is essentially every time they visit

7
00:00:26,790 --> 00:00:27,610
our Web site.

8
00:00:27,810 --> 00:00:31,140
So this right here I just want to reiterate completely fine.

9
00:00:31,170 --> 00:00:39,600
If it is exposed to the outside world not a problem now where we left off we had said that the approach

10
00:00:39,600 --> 00:00:45,500
that we took for securing our API keys on the server side of our project would not work quite as well

11
00:00:45,540 --> 00:00:49,130
on the client side because of the different modules system that we're using.

12
00:00:49,380 --> 00:00:54,930
Fortunately the Create react up project which we use to generate the client side of our application

13
00:00:55,320 --> 00:00:59,130
already has a solution for handling variables like this.

14
00:00:59,220 --> 00:01:03,340
So we're going to pull ups and the Create re-act documentation inside of our browser.

15
00:01:03,420 --> 00:01:09,720
I'm going to make a new tab and we can probably just search for create re-act app environment variables

16
00:01:09,750 --> 00:01:12,530
and can tell that I probably have search for this in the past.

17
00:01:14,050 --> 00:01:16,370
So create re-act up environment variables.

18
00:01:16,450 --> 00:01:20,190
You're going to find the read me right here in the create react up Ribault.

19
00:01:20,380 --> 00:01:26,210
If we click on that it actually does dump us at the very top of the document.

20
00:01:26,320 --> 00:01:30,660
But if you scroll down just a little bit through the Table of Contents you're going to find one the

21
00:01:30,670 --> 00:01:34,050
sections in here is adding custom environment variables.

22
00:01:34,060 --> 00:01:35,880
And that's exactly what we want to do.

23
00:01:35,920 --> 00:01:41,050
We're going to click on this right here and it gives us a lot of documentation about what's going on

24
00:01:41,050 --> 00:01:45,920
with environment variables inside of the Create react outside of our project.

25
00:01:45,970 --> 00:01:52,390
So to be clear we are going to define this strike key as an environment variable by defining it as an

26
00:01:52,390 --> 00:01:53,430
environment variable.

27
00:01:53,440 --> 00:01:59,020
It's going to allow us to kind of abstract out these keys to a separate file where we can just list

28
00:01:59,020 --> 00:02:06,190
them off as constants and freely change between sets of keys that we use for production and development.

29
00:02:06,190 --> 00:02:10,990
You can think of these environment variables as working the exact same way that we have the environment

30
00:02:10,990 --> 00:02:14,600
variable set up on the Heroku side of our application.

31
00:02:14,680 --> 00:02:17,990
So essentially we just set up some constant.

32
00:02:18,070 --> 00:02:23,500
We then make use of it somewhere inside of our project and then at runtime create re-act out is going

33
00:02:23,500 --> 00:02:27,500
to figure out what set of keys it needs to use for us.

34
00:02:27,670 --> 00:02:31,690
Now as we go through the documentation there's like one or two quick things I want to point out to you

35
00:02:31,690 --> 00:02:32,860
that are very important.

36
00:02:32,860 --> 00:02:34,760
First off is this note right here.

37
00:02:34,900 --> 00:02:42,180
It says any custom environment variables that we create must begin with re-act underscore app underscore.

38
00:02:42,350 --> 00:02:47,320
And the reason for this is that we don't want to accidentally expose a private key on our machine which

39
00:02:47,320 --> 00:02:49,860
is a very good reason very good reason.

40
00:02:50,050 --> 00:02:55,060
So we'll just make sure that we expose all of our variables with the name of re-act underscore app and

41
00:02:55,060 --> 00:02:56,770
the front of it.

42
00:02:56,770 --> 00:03:02,020
Now the other thing to be aware of is that to access these environment variables inside of our re-act

43
00:03:02,020 --> 00:03:08,480
code we do it the exact same way that we had done it on the server side of our project which is to scroll

44
00:03:08,490 --> 00:03:12,780
in here so we can see it nice and large all the environment variables will be defined on.

45
00:03:12,850 --> 00:03:13,880
Process.

46
00:03:13,900 --> 00:03:18,990
EMV so Same exact same thing that we did on the back end of our project.

47
00:03:19,030 --> 00:03:24,500
We did say process not envy Daut whatever and boom there is our key right there.

48
00:03:25,090 --> 00:03:27,250
All right let me zoom back out for a second.

49
00:03:27,880 --> 00:03:29,170
So here's a great example of it.

50
00:03:29,170 --> 00:03:29,460
Yup.

51
00:03:29,470 --> 00:03:31,920
Just processed envy blah blah.

52
00:03:31,930 --> 00:03:36,890
And the last thing I want to do in the documentation here is that to define these actual variables there's

53
00:03:36,910 --> 00:03:38,890
a couple of different things we can do.

54
00:03:38,890 --> 00:03:45,430
First off we can add custom or temporary environment variables through the shell and here's how to do

55
00:03:45,430 --> 00:03:48,650
with Windows you're saddled with Linux or Mac OS.

56
00:03:48,670 --> 00:03:50,020
Now these really are custom.

57
00:03:50,030 --> 00:03:52,990
They're like one time set it and forget it.

58
00:03:53,080 --> 00:03:56,490
They're not going to be available for all time.

59
00:03:56,740 --> 00:04:02,210
If you want to use True environment variables you have to define them inside of your shell.

60
00:04:02,320 --> 00:04:07,740
So that's going to be kind of an different configuration between Windows and Mac OS and Linux.

61
00:04:07,840 --> 00:04:13,180
And that's why you know this would kind of be the ideal approach to define them permanently in the shell.

62
00:04:13,180 --> 00:04:15,910
But in this course you might be using Windows.

63
00:04:15,910 --> 00:04:21,130
You might be making use of Mac OS you might be using Linux in the process of defining environment variables

64
00:04:21,190 --> 00:04:23,040
is very much different between all three.

65
00:04:23,080 --> 00:04:27,760
So we're not going to take that approach just because I'm assuming that you have you know who knows

66
00:04:27,760 --> 00:04:29,960
what operating system running right now.

67
00:04:30,370 --> 00:04:36,820
So the way that we're going to be taking care of all this stuff is by creating dot EMV files.

68
00:04:37,450 --> 00:04:40,760
So define to define a permanent environment variable.

69
00:04:40,810 --> 00:04:49,150
We define a file called EMV in the root of our project and then we can make a couple of different EMV

70
00:04:49,150 --> 00:04:54,500
files we can make a young one which is referred to as the default.

71
00:04:54,550 --> 00:05:00,490
We can make a dot dot development which might have a set of development keys and we can also make a

72
00:05:00,490 --> 00:05:06,250
ENP production which has a set of production keys and so that's basically exactly what we're going to

73
00:05:06,250 --> 00:05:12,370
do in the short of it is we're going to make a EMV development and a production.

74
00:05:12,460 --> 00:05:17,230
We're going to stuff our Strype keys in there and then freely reference those keys from somewhere inside

75
00:05:17,230 --> 00:05:18,360
of our code.

76
00:05:19,050 --> 00:05:25,030
Ok so now the very last thing I want to tell you about is that the official docs here say very clearly

77
00:05:25,030 --> 00:05:29,760
like these files should be checked into source control.

78
00:05:30,010 --> 00:05:36,370
I'm going to tell you I do not know why they chose to say that in case you want to use these environment

79
00:05:36,370 --> 00:05:42,160
keys for storing these environment files for storing some keys that you don't really want to be posted

80
00:05:42,160 --> 00:05:43,750
publicly and get up.

81
00:05:43,920 --> 00:05:45,330
That's 100 percent clear.

82
00:05:45,550 --> 00:05:48,280
This is a publishable key that we're talking about right now.

83
00:05:48,310 --> 00:05:51,530
This key will be exposed to the outside world.

84
00:05:51,550 --> 00:05:52,910
It is intended to be.

85
00:05:52,960 --> 00:05:54,010
It should be sent out.

86
00:05:54,010 --> 00:05:54,930
We want it to.

87
00:05:55,180 --> 00:05:57,520
But I completely understand that.

88
00:05:57,550 --> 00:06:02,560
You might think that you don't want to put any keys whatsoever on get hub for any reason at all.

89
00:06:02,560 --> 00:06:03,300
I understand that.

90
00:06:03,310 --> 00:06:05,820
I understand if you want to take that approach.

91
00:06:05,890 --> 00:06:12,580
So if you want to hide these keys you should feel free to check these files that were going to create

92
00:06:12,640 --> 00:06:16,740
into source control or to not excuse me if you want to keep these hidden.

93
00:06:16,750 --> 00:06:20,960
Feel free to add a line inside of our good ignore file and ignore these.

94
00:06:20,980 --> 00:06:24,650
Ian Lee files if you don't want these things to show up and get up again.

95
00:06:24,660 --> 00:06:30,630
I really do not understand why they chose to say specifically that these should be checked into source

96
00:06:30,630 --> 00:06:31,160
control.

97
00:06:31,170 --> 00:06:32,010
I don't know.

98
00:06:32,570 --> 00:06:35,150
Anyways if you know if someone finds out.

99
00:06:35,150 --> 00:06:36,800
Feel free to post on the course discussion.

100
00:06:36,810 --> 00:06:40,640
I would love to hear you know what the thought process there are for this line right here was.

101
00:06:40,650 --> 00:06:41,730
But you know whatever.

102
00:06:41,730 --> 00:06:43,040
So we've spoken about this long enough.

103
00:06:43,050 --> 00:06:44,070
Let's get to it.

104
00:06:44,070 --> 00:06:49,800
At the end of the day after all this talk essentially what we're doing is creating a dot in the development

105
00:06:49,800 --> 00:06:50,640
file.

106
00:06:50,640 --> 00:06:53,360
Same thing for production and then sticking our stripe key in there.

107
00:06:53,370 --> 00:06:54,100
That's it.

108
00:06:54,140 --> 00:06:55,730
It's really it.

109
00:06:55,740 --> 00:06:57,840
Obviously I could have probably just said that at the start.

110
00:06:57,870 --> 00:07:00,080
And you know already to be done with this stuff.

111
00:07:00,090 --> 00:07:01,470
But that's life.

112
00:07:01,500 --> 00:07:05,370
So the one thing I need to tell you is make sure that these two files that we're going to create are

113
00:07:05,370 --> 00:07:12,030
created inside of the client directory client clank clank client because these are client side keys

114
00:07:12,040 --> 00:07:13,470
that we're setting up.

115
00:07:13,470 --> 00:07:18,620
So inside the client directory I'll make a new file called EMV dot development.

116
00:07:18,960 --> 00:07:26,940
And really important make sure you put the dot in front of dot envy and that will also make dot in the

117
00:07:26,980 --> 00:07:35,090
dot production Okay now we're going to define our environment variables inside of both these files again.

118
00:07:35,100 --> 00:07:40,380
Recall that all the different environment variable names that we create must be preceded with re-act

119
00:07:40,440 --> 00:07:42,620
underscore app underscore.

120
00:07:42,630 --> 00:07:46,210
So let's go grab our public key first from the stripe dashboard.

121
00:07:46,320 --> 00:07:48,370
Here is the publishable key.

122
00:07:48,420 --> 00:07:53,520
Copy it all change back over to the DOT DOT developed and file.

123
00:07:53,520 --> 00:07:57,850
I'll say re-act underscore app underscore Strype.

124
00:07:58,440 --> 00:08:02,040
And you know we don't really have to say specifically publishable in this case because we're only working

125
00:08:02,040 --> 00:08:03,380
with published Willkie.

126
00:08:03,450 --> 00:08:07,410
So I was going to say Strype key just to keep the name thing a little bit short.

127
00:08:07,640 --> 00:08:12,870
And I will paste the key in like so now you don't have to wrap it with a string or anything or with

128
00:08:13,020 --> 00:08:17,450
quotes you just say this variable equals this thing.

129
00:08:17,640 --> 00:08:19,080
So we'll save that.

130
00:08:19,500 --> 00:08:20,620
We'll then do the exact same.

131
00:08:20,630 --> 00:08:24,180
Over in the EMV production file as well.

132
00:08:24,180 --> 00:08:34,500
So same name Riak stripe key re-act app is using the stripe key equals blah blah blah.

133
00:08:34,710 --> 00:08:36,340
And we'll save that one too.

134
00:08:37,110 --> 00:08:37,510
OK.

135
00:08:37,620 --> 00:08:43,710
So I know that we've gone quite long at this point and a lot of talk about kind of a boring item here.

136
00:08:43,730 --> 00:08:45,560
But I do want to test this out very quickly.

137
00:08:45,810 --> 00:08:47,070
So I'm going to.

138
00:08:47,150 --> 00:08:50,520
Well let's make sure we can actually like get access to these variables like that is clearly what we

139
00:08:50,520 --> 00:08:51,680
really care about.

140
00:08:51,690 --> 00:09:00,240
So inside my index file inside my SIRC directory inside of client S or C index on yes at the very bottom

141
00:09:00,240 --> 00:09:05,060
of this file I'm going to cancel log out or Strype key.

142
00:09:05,100 --> 00:09:11,070
So I got to say Strype key is an all reference process.

143
00:09:11,100 --> 00:09:17,410
Ian V dot re-act app Strype key like so.

144
00:09:18,000 --> 00:09:27,990
And then just for laughs I want to also conc the log out our our environment is and will do process.

145
00:09:28,010 --> 00:09:31,830
Ian V dot node underscore ENVI as well.

146
00:09:31,830 --> 00:09:36,480
So the documentation I don't know if you read it specifically but the documentation we just looked at

147
00:09:36,750 --> 00:09:42,990
also said that the node underscore in the variable is also defined for us and it works exactly the same

148
00:09:42,990 --> 00:09:44,880
way that it does on the backend.

149
00:09:44,890 --> 00:09:50,680
So it will automatically be set to production or development in the appropriate environment.

150
00:09:50,700 --> 00:09:55,260
And I just want to show that to you just in case you're curious I also want to mention Yes this is the

151
00:09:55,260 --> 00:09:58,710
one variable that is set that is not proceeded by react.

152
00:09:58,720 --> 00:10:00,480
Underscore app underscore.

153
00:10:00,550 --> 00:10:01,230
OK.

154
00:10:01,500 --> 00:10:02,150
Enough talking.

155
00:10:02,160 --> 00:10:03,470
Let's test this darn thing out.

156
00:10:03,480 --> 00:10:05,730
I'll save the index dodgiest file.

157
00:10:05,730 --> 00:10:07,670
We do have to restart our server.

158
00:10:07,710 --> 00:10:09,260
We do have to restart it.

159
00:10:09,900 --> 00:10:14,160
So I'm going to make sure I go back over to my server or kill the running server.

160
00:10:14,580 --> 00:10:18,670
I'll start it back up with NPM run Dev and I will let it just go ahead and do its thing.

161
00:10:20,260 --> 00:10:25,960
Now again I want to remind you that really it's up to you to delete or mean to ignore these files on

162
00:10:25,960 --> 00:10:27,620
get if you don't want to commit them.

163
00:10:27,820 --> 00:10:28,900
Again I can't say enough.

164
00:10:28,900 --> 00:10:32,410
I don't know why the documentation said that you should commit these.

165
00:10:32,530 --> 00:10:37,390
To me it kind of seems like maybe you don't want to because you don't want anyone to see even these

166
00:10:37,390 --> 00:10:39,440
public keys available and get hooked.

167
00:10:39,490 --> 00:10:41,050
Really it's up to you.

168
00:10:41,610 --> 00:10:42,000
OK.

169
00:10:42,100 --> 00:10:47,940
So we should have a refresh here it is and if we look at our console log you'll see very plainly striked

170
00:10:47,950 --> 00:10:53,340
key is global law and our current environment is development.

171
00:10:53,340 --> 00:10:53,730
OK.

172
00:10:53,800 --> 00:10:55,690
So that's pretty much it.

173
00:10:55,950 --> 00:11:01,240
Now two last quick things on tell you about we leave just while we're on this topic as a quick reminder

174
00:11:01,490 --> 00:11:08,050
we are using the same stripe key between both development and production because we want to just use

175
00:11:08,050 --> 00:11:13,000
the same test account because we're not going to go through the process of actually activating our strike

176
00:11:13,000 --> 00:11:16,810
account because it requires all that banking and tax information.

177
00:11:16,810 --> 00:11:19,200
So that's why we're using the same keys here.

178
00:11:19,300 --> 00:11:24,300
Now the other thing I want to tell you very briefly because this is something very very important because

179
00:11:24,310 --> 00:11:30,070
I've seen people make this mistake so so many times throughout courses throughout working on projects

180
00:11:30,070 --> 00:11:31,080
or anything like that.

181
00:11:31,300 --> 00:11:36,850
So in the change over to my terminal you don't have to follow along here just watch what I'm doing so

182
00:11:36,850 --> 00:11:39,560
you understand what's going on.

183
00:11:39,680 --> 00:11:44,710
I can open up a new terminal window and I'm going to open this up inside of my file explorer on my Mac

184
00:11:44,710 --> 00:11:45,800
machine.

185
00:11:45,810 --> 00:11:46,020
OK.

186
00:11:46,030 --> 00:11:48,010
So here's my file explorer.

187
00:11:48,730 --> 00:11:56,530
If I open up my client directory you will notice that dot files were referred to as like the dot EMV

188
00:11:56,800 --> 00:11:58,110
stuff that we just created.

189
00:11:58,240 --> 00:12:02,870
These are referred to as dot files because we preceded the name of the dot right here.

190
00:12:03,100 --> 00:12:07,430
Mac OS interprets these files as being invisible.

191
00:12:07,450 --> 00:12:12,940
So look I'm looking at my client directory right here and inside the client directory there's no dot

192
00:12:13,000 --> 00:12:18,520
in the files and I'm shaking my mouse all over the place because this has caused so many people so many

193
00:12:18,520 --> 00:12:20,190
troubles over the years.

194
00:12:20,290 --> 00:12:26,500
The reason this is relevant is that if for any reason you ever like highlight these files and say oh

195
00:12:26,590 --> 00:12:31,420
I want to reorganize my project I want to like pull all this client's stuff over to like here or something

196
00:12:31,730 --> 00:12:32,440
was totally fine.

197
00:12:32,440 --> 00:12:33,390
We can move the stuff.

198
00:12:33,490 --> 00:12:39,880
But when we drag or when we highlight everything and drag it that will not move the dot files that we

199
00:12:39,880 --> 00:12:40,900
just created.

200
00:12:40,900 --> 00:12:45,010
So I just want to throw that out there so you are 100 percent aware by default.

201
00:12:45,010 --> 00:12:48,710
Mac OS will not show you default files in this interface right here.

202
00:12:48,790 --> 00:12:53,680
And so you just have to be aware of that if you start to highlight everything and drag it and make the

203
00:12:53,680 --> 00:12:57,630
assumption that all the dot files came along with on the right.

204
00:12:57,780 --> 00:12:58,590
OK.

205
00:12:59,010 --> 00:13:00,360
So I want to throw that out there.

206
00:13:00,430 --> 00:13:03,130
Super gotcha super big gotcha.

207
00:13:03,160 --> 00:13:03,430
OK.

208
00:13:03,460 --> 00:13:08,620
So I think that is more than you ever wanted to know about API keys and whatnot.

209
00:13:08,770 --> 00:13:12,110
Back inside the index js file let's clean up those console logs really quick.

210
00:13:12,130 --> 00:13:13,370
We really don't need them.

211
00:13:13,450 --> 00:13:17,920
So I think that at the end of the day we got all three keys everything is working.

212
00:13:18,010 --> 00:13:21,330
We got the keys inside the re-act application everything is happy.

213
00:13:21,330 --> 00:13:22,260
At this point.

214
00:13:22,270 --> 00:13:23,380
So let's take a quick break.

215
00:13:23,380 --> 00:13:28,240
We're going to come back in the next section and we're going to start to set up that re-act stripe check

216
00:13:28,250 --> 00:13:29,140
out component.

217
00:13:29,230 --> 00:13:31,330
So I'll see you in just a minute.