Setting up an API Secret

[00:00:00]
>> I wanna make a call to a third party API and I wanna do that using a secure API token. So there are a lot of ways that we can do this. The way that I'm going to do it is we're gonna use something called the Open Movie Database.

[00:00:14]
It's very similar to IMDb, except it gives us access to an API. And so that is in here, I think I have it opened somewhere. Did I not open that one? Here it is, OMDb API. So go to omdbapi.com and then register for an API key. And you can get in there for free, just put in your your email.

[00:00:42]
I think it filters for disposable emails, so just use a user actual email. It's gonna email you the API key, And I've already got one. So I'm not gonna, or actually, I think I might need to cuz I don't think I, Let's do it. I think I have mine on the other, Email.

[00:01:11]
A key has already been assigned to that email address. Okay, let's open my email and find that key. Okay, so I've got that key. And so you are gonna need this key to do the next piece cuz I'm not gonna be sharing mine. So make sure that you get that pulled up.

[00:01:37]
And then once you've got it, we can manage this a couple different ways. The way that I like to do it is with a .env file. So we can do .env or we can actually use netlify's environment variables. We'll end up using both and I'll show you some cool stuff about the the netlify environment variables.

[00:01:59]
But for getting started quickly, we can just do .env and let me see, I think I have an extension installed that's gonna let me do this. OMDB_API_KEY =, okay, so that's not masked yet. So I'm actually gonna pull this off screen. Now, I'm gonna pull the whole thing off screen.

[00:02:19]
All right, so I have saved that and let me install, actually I wanna be able to show you what's going on here. So now, I have just installed an extension called Cloak. And so we can see here my API key is set, but it's hidden, which is very nice.

[00:02:37]
So now, I can show my .env without sharing API keys. And what I just demonstrated inadvertently is why it's important to be able to keep these things secret because I can't just put this in the client side code. If I put it into client side code, so let's say I go into my, where's it, here, and I wanted to write something secret and I go into the index and I try to add some code here that's like my, Super secret.

[00:03:16]
Right? Now, I put this in my code and I go out here and I look and any mischievous third party now, let me actually start the server, so it's running, Can go in here, inspect elements. They're gonna come down, they're gonna look, they're gonna notice, hey, there's some script stuff happening, I'm gonna look at this.

[00:03:40]
And they're gonna end up getting in here and they're gonna poke around and they're eventually gonna find, no, here's my super secret, and it's exposed. Now, they've got it, they can go impersonate me, they can go do mischief in my name, and the only people doing mischief in my name should be me.

[00:03:57]
So we can't do this, we can't put secret keys in the client side code, and that means that we need to do something different. And fortunately, serverless functions do not expose their code. If I go look at the the browser here, we can see that up here somewhere we've gotta call the movies, right?

[00:04:18]
Now, I can poke around, I can see the headers. All right, I can see here's some headers. All right, I can see we got a response, we got request headers, and then I just get back the data, but I can't find anything. If I go directly to this as well, let me, can I just open this in another browser?

[00:04:39]
Let's go over here. All right, and I'm gonna inspect. There's no data here, I can't see the source of a serverless function. This is protected. So the actual code that runs in the serverless function is not accessible in the browser, which means that I can use secret keys in it without exposing them to people who are snooping around.

[00:05:03]
And that means that I can successfully protect my mischief. Again, I'm the only one who can do mischief in my name. So let's use this API key that we just created to update our movies and we'll add in some scores. I wanna show like the Rotten Tomato score, Metacritic, things like that.

[00:05:30]
To do that, I'm going to head over to my movies serverless function and we're gonna add some stuff to it. So we're still loading the movies from JSON, but now we're gonna add a couple extra pieces. I need to construct a URL, so I'm gonna use the built in require URL.

[00:05:50]
This is a node, like a node built in that lets us use the URL API. So I'm gonna use that to construct the query string and to build out an API URL instead of trying to do string concatenation and stuff. And then I wanna use fetch and I wanna use the regular fetch API and that's why we needed to include node fetch as a dependency.

[00:06:12]
So as you can see here, we have one dependency of node fetch. Node fetch is a very lightweight module. If I look at node fetch itself in my node modules, where is it? It is here. We can see that node fetch itself has no dependencies. So it's a tiny little polyfill that lets us use the fetch API in node.

[00:06:40]
It's very nice, it doesn't add a lot of overhead to our apps, and it creates a lot of consistency where the same code that I write on the browser is the same code that I'll write in node to do the same things.