Build a Secure Blog with React, Gatsby, and Netlify

Today, I’d like to talk to you about building a website, actually a blog with Gatsby, so Gatsby is a tool for creating static websites with react and allows you to pull your data from virtually anywhere like a CMS or markdown files or even a database, and it Leverages graph QL to do that and webpack to combine everything and your react code to generate static files and also, you might have heard it called Jam.

Javascript API is a markup known as a jam stack. So that’s that’s what Gatsby fits into and we’re going to deploy that to neckla fire neckla Phi is a hosting company for static sites that offers continuous integration, HTML forms, AWS, lambda and a whole bunch of other things. Let’s get started. This screencast is based on a blog post. I wrote called build a secure blog with react, Gatsby and nullify, and at the bottom of this post it links to a github repo that has all the completed code.

So you’ll be able to see this. If you want at github calm, octave, developer, Gatsby nullify octa example, and in this there is a demo doc file, a dot for asciidoc and it can be rendered with the asciidoc plugin. So it looks a little nicer and you’ll see the table of contents. We’re going to start by creating a new project with gatsby, we’ll add the net left, ICMS check it into github, render the blog posts, add some markdown support and then use Gatsby’s node API to generate some static, blog pages and then we’ll secure it all with octa And fix some production build problems that happen because of that.

So I’m going to start by putting this on the left, and you should know that it says you will need node 12, a github account, which I already have a nullify account, which, if you go to net with i.Com, you can log-in and create one. I already have one so it’ll automatically log me in you can see. I do not have any sites yet developer. Dr. Comm is where you can sign up for a brand new octave developer account, so you can see, create free account there and we just prompt you for a few things.

You get up to a thousand monthly active users for free, so back to our instructions. You need to install Gatsby CLI first, I already have that installed. So if I do get the version you’ll see I’m using two eight thirty and then I’ll create a new Gatsby project using Gatsby new, and this just builds it from the Gatsby starter hello, world project. On github, then I’ll CD into that directory, and you can see the directory structure by excluding node modules and using the tree command, and if we do the NPM start, that will call NPM run develop and that will call Gatsby develop.

So I love the attention to detail that Gatsby uses because I typically run NPM start for most of my projects and the fact that that just works is pretty nice. So if you go to localhost 8,000, so not a lot going on so far, let’s install the net Liffe ICMS and it’s Gatsby plugin. So little control see out of there and you’ll notice, I’m using version numbers for both of these plugins. You don’t have to.

If you don’t want to, but this tutorial might not work so I’ve tested these and verify that they work and then I’m going to open this up in BS code. And if you go to the Gatsby config file, you can add the net with ICMS here. As a plugin and then under static, create a new file, admin, config, yml and then put this the animal in it and what this does as it configures your project, so it’ll have a blog and the blog will have a path, a date, a title and a Body and you have to fix the animal, unfortunately, that copy and paste it and work so well.

It looks correct in the blog post, so if you got one from there and everything will work so nothing like the any animal developer, close copy and paste am ma’am seems to fail every time. Okay, now that we have that up, we can go and open the terminal here: option Tildy or is it control Tilly? There we go and then we can do NPM start and it’s building the development bundle. So now, if we go to localhost 8080 one to login, so we can create a new blog.

We just have a test repo or in our vs code. It says test repos the back end, so this is just an in-memory repo. So if we had like blog first post and then we said hello, world and blogs are awesome and so is back down, and then we change it to mark down over here. Oh, I didn’t like that. So then we save it, publish it. You can see if we go back to our blog collection. It’s there. The problem is, if we restart it, it’ll go away, that’s just because we’re using a test back in so now we can create a github repo and add our project into it.

So I will go to github.Com and, under my account, new repository and call it Gatsby that Wi-Fi octa okay, okay, three posit Ori now grab this and we need to add our project to get so get in it and then get add everything and get come in And add project to github and copy and paste those two commands now if we go to nullify this app that notified comm, so I start we will integrate it with our github authorized us now we can search for neckla, fie, yeah yeah, and then you can use The defaults and just click deploy site and, if you scroll down to production, deploys you can see it’s actually being deployed after a while you’ll see, site is live down at the bottom of your deploy log and if you scroll up to the top and go back To your project – and you will see the URL for your project there and look at that – it’s deployed to nullify so that part was pretty easy.

You’ve built a react, app checked it in the source, control and published it to production, not only that you’ve used natla fire in its continuous delivery platform for actually deploying your site. So anytime, you check in any code to your github repo it’ll automatically be deployed. So, let’s do some other things: let’s modify the net with ICMS to use github as the backend so start by changing this to name equals github and the repo to be are we deployed yeah speak now? Okay, now we can save that and commit it and github as a back-end, because without this anytime we save or make any changes.

The files won’t be saved if you restart the app. So we don’t want that so push this to production, get push origin master. Now, if you go back to net lo-fi that will kick off another build, you can see down here, it’s building another one, and so once that’s done, we will be able to login with github to modify the back-end files. Okay, so the site is live now we can refresh and if we’re to go to admin.

Sometimes you do need a slash on the end, but it appears to add it so bad indentation doesn’t like our gamal. So, let’s see what’s the problem: oh we got a back tick there. So we’re going to fix that get course the animals, the problem. So we fix that now we can refresh and you’ll see it prompts us to log in with github. So there’s no off provider configured for github, so we have to do some work there.

If we go back to our instructions, you’ll notice, the first thing to do is to go to your site settings and navigate to access control and down to OAuth. So back up to our site and site settings and access control and install provider, so we’re going to use github for this, but first we have to go ahead and add it on github. So if we go to github developer settings, you can see that’s at setting. Slash apps, Oh author haps, we can add a new one, we’ll call this SB blog and you’ll grab your home page URL from nullify.

So this guy right here. Yes, then the callback URL is all done from API. Now, if I calm and we can register our application and then we’ll get the client ID and client secret from that, so client ID secret and then we’ll install that as an authentication provider. Now, if we go back to our content manager and try again this time, it’ll prompt us to authorize as our user, and so this makes a lot of sense to me because this blog is stored in github.

So why not store our blog post in github? So we can start with creating a new blog post, we’ll give it a path of something like first post and we’ll say hello, world and it’ll. Do it and markdown and fabulous there. We are and then emoji just to spice things up a bit all right. Then we could publish that and if we go back to our blog collection, we’ll see it’s there, not only that, but if we go back to our project and do git pull origin, master it’ll actually pull that file and you can see it was created in the Blog directory, so now the next thing we want to do is add the ability to render those blog posts on the UI of the Gaspee application.

So for this I’m going to open up in IntelliJ the reason I’m using intelligence Ted of es code is because it has the ability to pre-record code snippets – and I know V s code does as well, but what I wasn’t able to do is figure out how To do long blocks and they have just little snippets. So if you know how to do that with vs code, please let me know, but I’m going to create a new component, log-roll JS file, so components log-roll is this is my blogroll component and what this is? You see here, it extends from react component has data that it grabs and it basically grabs the posts and maps them into a featured post and then the various you know listing a post beyond that and an excerpt from the post and then a link to keep Reading and then it uses this graph QL to actually go and get all the blog posts and formulate the data so and will also create a page called source pages blog KS.

And this is going to use that blogroll component and just show all the latest posts and then we’ll add a link to that in the pages index is so we’ll grab the code here and you’ll see it just renders hello world, and then it has a link To view the block, so we can restart gatsby make sure it’s not running back here. It’s not so we’ll close that one and then NPM start. So it’s building that it’s pulling in the blog posts and you’ll notice.

There’s an error because it nut cannot query the field all markdown or mark on type query. So that’s because markdown isn’t actually added at this point. We don’t have markdown support. So the add markdown pages Doc’s from Gatsby, show that Gatsby follows the following steps for making this happen. It reads the files in the Gatsby from the file system. It transforms the markdown to HTML and the frontmatter to data.

So in that blog post itself, you, if you were to look at the blog, you can see that there’s frontmatter on there just like if you’re using Jekyll and then it adds a markdown file, creates a page component for the markdown files and create static pages using Gatsby’s nodejs create page API, so we need to enable all that so we’ll start by installing the Gatsby plugins for a markdown support. While that’s running, we can configure them in gatsby, config j/s.

So right now, that’s just the Gatsby plug-in for net worth. I we’re stuff that net liffe I plugin, but now we have the source file system that reads from the blog and it uses markdown pages and then transforms them. So now we can do NPM start. If we go to the localhost 8080, you blog, we can see that that’s actually rendering and you’ll notice. It doesn’t actually use markdown in the preview, but if you were to click on the post itself, it will but what this doesn’t work, what the heck? Well, that’s? Actually expected because we didn’t tell Gatsby to generate pages for each of those blog posts, so will create a Gatsby nodejs.

This will do the processing of our pages for the markdown. So you see here it uses the create pages API and it uses this blog template uses this graph QL to build all those blog pages, handles any errors and then goes ahead and creates the page. So we do have to create that template click templates blog s then get to the blog template. You can see here it just grabs the data grabs, a markdown from it and then puts it in an HTML template and uses one of my favorite named attributes dangerously set in an HTML, that’s from the process.

Markdown and then this is the page query for it, and so now we should be able to restart and see our markdown rendered properly. Now we should be able to refresh this page and it’ll work. There we are and our markdown is rendering. Now we can check this in, add, get commit, you’ll get push it and we can go back to nutloaf I and see that it’s deploying that and once your site is live, you can go back to the main page there and view the blog and you’ll see That your markdown pages are rendered.

So that’s pretty slick now, let’s add an account section, so we can have a part of the app that’s actually secured and it’ll use octave to secure it. But the general notion is: this: won’t be a static part of your app. This will be somewhere people log into, and maybe they subscribe to a newsletter, maybe they update their settings or the subscription or something like that. So we’ll start by creating a pages account that j/s file.

So you can see this just has a home link. That goes back to the home page, a settings link and then an account and not much to it at this point, so we can link to it from our index page I’ll, say my account and since this won’t actually be static, content is going to be dynamic. Content at the bottom of gatsby node. We have to add this that excludes the account function for the account page. So you can see here it still calls on create page, but it says hey: if the path matches account, then don’t bother doing it.

So now we’ll make this section secure with octa. So I have an octa developer, account at dev, 1, 3, 3 to 0. Login to that and so you’ll create a new application applications at application, and this will be, I believe, it’s a single page application yep and then we’re going to enter a name like gatsby account and all of these login redirect URI so go to a single page. Will say: Gatsby blog and we’ll change this to the default of 8,000, and then this one will be 8,000 account just double check, I’m getting that right, yep and then 9000 account and the reason for 9000 is because when you run the production build locally, it will Run on 9000, so if you do Gatsby build, it builds all your static assets and the new do Gatsby serve.

That will do it on 9000, instead of 8,000, which is more of a developer thing. So we’ll change that to 9000 and then also our net LeFay site so grab this URL and you’ll have to do this for any app that you want to deploy to production because all of the redirects have to be white listed and wildcards aren’t allowed. This is the most secure way of doing off. So that’s why we do it that way: okay, so you’ll notice, we’re using authorization code flow and not implicit flow.

This actually uses pixie public key proof exchange proof key yeah, something like that, but it’s very secure proof. Key code exchange, so it generates a one-time code and then it sends that with the request, when you get the code back, it sends that to get the token so works nicely. If you go to API trusted or origins, you also have to add all those trusted origins. So it added one for us, but that’s the local build called local pride, build an HP, HTTP localhost 9000.

So that will work and then cores and redirect and then do another one for a net worth. I and you just need to do the main name and of course, and redirect so now our apps all setup and you’ll notice. These follows instructions over here for a trusted origin, and now, once the lock does sign-in widget, so this is latest version 3.72, while that’s going will create a new login component while getting that jeaious.

Now this works is it has some configuration for octa so we’ll need to grab from our dashboard our org URL. So that goes right here and then from our applications, the client ID and then there’s some customizations. I did to give it a Gatsby logo and you’ll see the redirect URI, since this does get evaluated by Gatsby. I basically ignore, if there’s window in there and then otherwise, we grab the window location, origin and then the auth parameters say hey.

Pixie is true and the response type as a token and an ID token. So this will be an access token, and this is the element that we’re going to bind to. So we create a new off to sign-in Widgit and then we grab the user as a state and when the component mounts we go ahead and grab the auth client and we grab a session. And if that session exists and it’s active, then we clear the parameters from the browser window.

We set the user name in the state and we set is authenticated to true and then we get the access and the ID tokens and save those in local storage. So this is the API that does that for you and then you could say hello to the person who just signed in so both in the console it reloads the page. So it will be able to grab that and render it in the page as well, and then, if there’s any errors, go ahead and remove it and render it in that sign in.

So that’s how all that works and we replace those placeholders so now in account. Jeaious we need to modify that to have a little more account logic. So you can see here. The account is now its component, its own component, and it grabs that user state and how is authenticated, works as it gets. That is authenticated, true or false, and then it grabs the ID token and sets the user from that with their name and if the token has expired, it goes ahead and clears out everything and logging out.

It uses a sign out method and then sets local storage to false and sets a user to false in the navigates back to the beginning. So then it renders the user’s name, this state user and it adds a logout button. So now, if we restart the app with NPM start, we can go to localhost 8080 window and I can do my account and you’ll see we’re prompted to log in and now has my name in there. And, of course I can click settings or back to my account or back to the home and that’s all working, so I can even log out there.

So one thing that does happen. If I were to run Gatsby build, it will show an error because the sign-in widget isn’t meant to be used, server-side or doesn’t have support for a server-side rendering. So you can see windows not defined and that’s in the actual sign-in widget. So we can’t really control that it shows the files that that exists in and the path to get to it. So what you can do is in the bottom of Gatsby node.

You can modify the webpack config to basically ignore the sign-in widget as a dependency. So you see on create web pack config if the build HTML stage is happening and just exclude and use a null loader for that. So now, if we were to try again this time, it’ll work there we are, and now we can run gatsby serve you’ll see it runs it on 9000 before to try it there. Let’s try in an incognito window, 1 9000 doesn’t help.

Cores so looks like we might have messed up something in our octa. Config go to api trusted origins, Oh ghost! Oh I’d used HTTP. So my bad save that now. If we try again this time, it’ll work so make sure you have your core settings correctly or you’ll end up with an information or an error like that one now back to our instructions. The next thing I want to show you is how to add user registration, so if you go to users, registration and click on edit, if this is the first time you’ve done, it you’ll see a different screen.

That just says: do you want to actually enable this? But if you’ve done it before and turn it off, it’s a little different. So now we have that – and these are just all the defaults. It’ll show the sign up link on the sign-in widget, but we do have to configure that first. So in log in is once you’ve turned it on. I have to go in here and add a bit of configuration at the top, so we have our auth params and add a new and called features and registration.

True and then we can go ahead and rebuild it and right and Gatsby serve, and now, if we log out they were to click my account, you can see that there’s a sign-up link now and it uses that same sign-in widget. So it just prompts you for the email password first name last name and you can adjust those if you want, so you can add new users that way so pretty sweet. You did it or we did it and we can check this in and say octa for off, because friends, don’t let friends, write, authentication and I’m your friend.

So the other thing you can do is you can extend Gatsby’s functionality, so we added octave for authentication, but if you want to use, add sign up for a newsletter like with tiny letter, that’s pretty neat site. I have a friend that uses it and I read all his newsletters so that works really nicely and you can also store your user settings in Octus, since you have the users information, so our octa node sdk would allow you to do that or any back-end SDK And in fact, if you’re developed like a Java or.

Net one, you could use fetch right from your Gatsby application. Of course, you could do it note as well, but this is how that code might look so in your component did mount you go and fetch the user settings you’d pass the bearer token or the access token from the token manager, and you get your data back And you could do what you wanted with it, so this blog post again is available at our octa developer blog, the github repo is on octave developer as well, and if you want to see the developer or the octave sign-in widget, you can customize that as well.

We have a little cloud for our issue, but that came up so you can make this look all kinds of different ways that you want to make it look and the we’ll show you how to do it. So thank you for reading. If you go to our YouTube blog, which you are likely reading this on, that’s at youtube.Com see /dr dev. We have many more tutorials on how to use various api’s and authentication mechanisms and please subscribe, and I hope you have a great day.

Thank you.

---

Don't have time to do the blogging thing?

Maybe Copywriting services are for you.