Categories
Online Marketing

Publish Typescript Package to Github & NPM | Typescript package publish | Common JS and ES6 support

Okay. Recently github has provided this feature that you can also publish the same package to github as a github module. So we will try to explore both the options, how you can publish a package to npm, which is a node package registry node, package manager right and with there we have all the packages are available.

If you look at the express react, angular all the packages, we are doing the installation and we are fetching from the npm registry right now. You can also think about how can I publish my own package? You created some kind of utility, some kind of a commander tool, some kind of helper tool, cli tool which you wanted to publish like. You created some kind of a mock library which is going to mock your database in local storage or any other kind of http library, which is helping you same as xeos cache apis and all you wanted to publish those kind of packages.

So how can you publish and what all kind of module system you can support like uh? Consider this particular package react, or you can say express so express – is a npm module right and this some somebody has published this particular package, and now you will be able to install this particular package and use in your application right. So somebody has published it, and now, if I wanted to use, I can use it just like using require commonjs module or you can also use it in the typescript support ufi.

You can see import express as alias from express, so it is supporting everything because the alias type type script – typing type definitions are available for express. Similarly, if we just talk about angular angular has at the rectangular, where we have all the packages like angular c lines. Now, if I wanted to install it, what I will do is, I will simply do npm install minus c, it’s like a utility package, so you will install it globally and then you can.

You will be able to run all these different different commands right. Similarly, all these packages are published by someone you can see that this is the reference repository. This is the home page last published versioning. You can see the semantics versioning where you are actually major minor and patch version right. So all these things you have to manage now to support all these different things like your package, should be able to be imported as a common gs modules or the esx module.

When I talk about es6 module means you will be using the required syntax as a common gs module right if you are using import, export import, react from react or construct equal to require react. Both both are different right. So simple, like i’m just using this writer import react construct equal to require it. This is a common json view of common gsb of importing the module, but your module, which you publish to npm, should support common gs export so that you will be able to use it like this or otherwise.

You will do import react from react. Library – and this is what you do – this is a es6 view of import right, so we will see how you can publish a simple utility and which can support both and what we are going to do. We are going to support both the system, common gs and esx import, and we will use typescript for it because if you are using es6, so you should also be providing the typescript interface and typing the type definition for your library.

So, if any typescript project you are writing for the node.Js or the client side, you should be able to provide type definitions for it. Okay, so we will take a look, the basic things before publishing any npm module. So, first of all, you should have a npm account. Npm account means you should be able to login like you can do the sign in and you should be able to create a package. So I do have my account just try to see.

If I can do, I don’t have password on the system, so you should be able to do a login right. So how you can you can do all these logins using just simply npm login, okay here it will ask you your username. So if you have account, then you would be able to provide it and your npm password enter password. When you create your account, you should be getting it and your email id okay. So I am logged into this repository to this registry.

It’s npm global registry. Here I can publish my public project, a public library or private library. Okay, now coming to the code code, can be as simple as basic type script code or basic javascript code. What I am doing is, I am creating the build for common json eses es6 support. So I am using the typescript here if you can see the package.Js the definition here, I am using the type config right so few things which you just need to take care.

While you are publishing a typescript package, because you are writing code in typescript, you will be uh exposing the interface all the type definitions. So you should always make the declaration. True four types of packages – and this emit metadata decorations, experiment and decorations if you’re using any third-party module, they may need these flags as a tool so that you can expose the typings used by those modules and target is 2015 module system.

Is this strict true? So you will not be using any everywhere. You will be defining the types. These are the compiler options which you have defined and what you are including and type root. You will be adding a type root so in in index.Ps on your both the packages and output directory. When the compilation typescript build is done, you will get a liv esm, okay, so this is the kind of utility you are going to build.

Don’t treat these library as that they are. You are going to get an output as a ui, it’s just a cli library or some kind of utility and you’re just writing those classes which whoever is going. The end user is going to import this module and you you will be using these classes to execute some function, so your code can be as simple as just a simple like this functions, calculator or anything. Also.

I should consider that I am just exposing these two things. One is a function and one is a class okay. Now what i’m doing is, first of all the package.Json definitions and typing typing.Json, these two things you have to take care here. I will be supporting both the module system esm and here this cgs common gs and esm modules. So for common gs, this is another typing.Json. I will just extending the ts config, and I will be just overriding.

These two attributes in my compiler config, which is a model system, will be config and output directory for uh compiler types compiler will be cgs, so i’m using common js here here, i’m using esm. Okay, esm and cgs both outputs – I will be get when I do npm rental, so I did already npm install when I do npm run build for this particular code. So I i’m trying to get the build for both here. I’r executing both the things by passing both the configs in the tsc so as mentioned, output directory is different for both output directory and output directory for this ts, config is different.

So if you see the lib right, it’s a cgs common gs right. So if you take a look on to the index.Js, it is exporting like this, so whenever I wanted to use it, I will. However, I do it on hello equal to consider. This is a hello.Js file or library, hello. Okay, so I will just importing npm install uh this library name and then I will be able to install this package, something like this from that library.

Okay, this this library is just exporting one class and I will be getting it like this, so it is exporting, say hello and the class. So i’m getting two things from here: uh class, hello and the say hello function, so I will be able to import them. Something like this, like commonjs module way where you just use, require and in the require this particular module. Commonjs module is exporting two things module so how we do it module exports.

But here we are exporting two things say hello and hello, so you can selectively get either hello or say hello or both while you just require it. So you can write your code and you will be able to require. Similarly, if I just take a look on to my esm here, I will be getting the export import syntax right, so it is exporting two things. So what I can do is either you can just use import everything as uh.

All from this module, like uh module, name library name right now, I can just do – is everything dot here? I will just use the hello in my code or like everything, dots here. This is, how will I use, or I can just use import selective import either. Just like say, hello or hello, wrong library name, which i’m going to publish okay, and when you just put a library name, it will look into the node modules before, because you will publish this module, then you will install it.

This module will be available in the node modules and when you do it something like this, it will look inside a node modules inside index.Ts and it will find okay. Yes, I got the definition of hello and clo, so it will import that. Similarly, we can just do a selective impact input for this commonjs module here here you will just uh const like get everything constructs equal to, you can say, require this library name and then you can just do a dot around it and you can get see hello Or you can just get the hello okay, so this is the different way of importing exporting things, and i’m supporting my library, my library, supporting both things right before that you can also write your test coverage and all these things you can write.

So all the setup is done here. You can just look at the code if you want here, I have package.Json. So what is minimum thing to require to publish on the package to npm? Nothing, you just need a code. You don’t even need a repository, because npm is putting the repository what you have defined in the configuration. It is not saying. Okay, you just need to have a repository, but obviously, if you are publishing something we will be managing the version, so we create a github track tags and all and then from there we run a ci cd which indirectly publishing the module to the npm.

Now the data modules are also there, so you might be publishing the same module on the github as a getter module. So what I did is, I just did npm login, okay and one. The name of the package is test package right. So if you just look at the test package globally, there may be 100 package already there with name test package, but package name is unique, so I will be using my username as a prefix. So for tksarma, this test package is unique right right.

So i’m just putting my alias this is you can say the scope is my username or my own repository there i’m putting test package okay. So you have to select the name wisely. So i’m putting a test package in my repository and it is a public package. So, first of all, we have already done npm in it. What we need to do is, after once we are done. Npm init. We can just let’s try to do and claim publish so here you have to take care of publishing this package as the public package, so I have already written these instructions here how you are going to publish a package okay, so you just need to provide this Access public and if your package is already published, then you have to manage the versioning here.

I have a package.Json here. If the package 2 1.2.2 is already published, npm publish x is public, so you can see it is now published mobile package and it will publish the version latest version and now it is successful. I don’t see any error, and this is now package is available. You can just locate it or I can just show you okay. So this is my package name and it’s a public package so while defining it as a npm install npm, install minus minus save, you have to use this particular name.

Add that tk semaphore slash test package. The scope of this is around this okay, so my package name is unique. I don’t need to worry about the conflict you can see now you have to link it with some repository, so all these instructions you are specifying in your package.Json. The repository author registry registry is npm registry. It is common global repository, the repository url, because the same configuration will be published on the npm repository here.

You will see the link uh, the repository of the page. All the descriptions which you provide in the package.Json will be published on the npm site, and here is a description. Okay main will be the index.Js for commonjs and for the modules it will be index.Js in the esl. Okay, I just need a build instruction. Simply npm run build, so it will just generate a build for esm and cgs. Both and rest. You can do the testing and all these things length length fixed because you are, you might be writing a huge amount of code for a library.

So you need to take care of the linting library, uh linting testing testing coverage. You should be writing good code for this okay, so you can see see the author publish config repository and all right now, if I did npm publish, I did nothing. I just have a package.Json and you can create a package.Json using npm in it, and you can just provide the username basically tk server. Okay, there, you can initialize your uh basic package.

Json with the tksm as a username for the scope, okay, so publishing something to uh. I can say: npm is quickly very easy. You just need to have account. Second, you just log in npm, login and then publish npm login. Just you have just have a username password and your package will be published same as like this okay. Now, what? If I want to publish the same package to a gator module, okay, few things for the github module, it’s like a same process, but now what we are going to have, we are going to have it.

We are going to target github, only not npm as a publisher right. So few things which you need to change in your code is the publish config. So what published config is published, config is saying that now publish it will be targeting npm module, npm github, so it will be pointing to this domain npm.Package.Json.Com, and your repository name should be valid because before publishing, it will look at your github.

This is the username. Okay, do you have this repository there? The name of the package can be received, okay repository and you are now in the depend just just plug in with these things, so I already have this package.Get.Json with all the changes. So what we do is we will just rename it to package.Json and rename the existing one. Here I already have all the changes published config repository and the basic things, the package name and all it should be unique.

Okay and types types will be available in index dot d, dot ts, which is same in earlier version. Also in the package location, we were having lib integra dot d dot ts. So if you can see here here, I have whatever the code I have written. These are the types available for it, so whenever you import this package in the typescript project, where it will look for the default definition, typing is in the index.

Ts. So if you are using these classes, see hello and all these things, then it will look for the default typings here. Okay, the name is, it is expecting as a string if you are importing this library and passing name something else, and it will give an error because the typings are in the index.D index: dot d: dot, ts, okay, okay, so let’s get ready for publishing it to The github module, so what we need to do after doing all the changes, let’s rename it to existing package rotation to something, and here we can rename it to package.

Json okay. So it’s saying we have all the definitions here also, I will be publishing this library for both cgs and esm. Okay and library files will be in the live. The same instructions build a notch, only the publish configuration. The repository should be that available already, and I have this – is a typescript package. So if, if we talk about what is needed for the typescript library, okay, obviously you just need to have a typescript uh in the dependencies like.

I have a lot of things because i’m doing a testings and all these things – nyc moca, chai bluebird. All these things I need. But if you are writing a simple package without test and coverage and all then you just need to have a typings node.Js or a minimal typescript like here, okay, otherwise, once your package is published, if you see the dependencies dependencies are published here, you can see it.

These are the dependencies, and these are the dev dependencies – try not to increase by these too much, because your packet should be lightweight and you should not have a dependencies and on too many things too many external package try to write more on your own code. Okay, now, first of all, if we just go there, how to publish a github package, so you just need to have a github account that a basic thing, and now you can just follow the basic instructions npm login.

Okay, here is the command which you have to little bit careful about. You just need to log in first of all with the registry, it is npm login registry this and follow the prompts like this. Here I change the registry right now. It is targeting to npm.Package.Github.Com. So it is not seen as your npm login, and here, if you have two factored authentication enabled, then you have to pass your personal access token.

Okay, most probably yes, i’m logged in now. This is about when you wanted to use it. Okay. What I can do is, I can just figure the simple instructions: npm publish, okay, let’s see if we get any errors, so I think I bumped up the version, so it’s packaged or decent. So currently, the version is this: you can change this to one dot, one. So it is also following the same instructions, and now your one dot one is published.

Okay, it is quickly straightforward. You just did npm login. Just you just need to specify what you are targeting the registry is this right, so you will be targeting this registry and you are publishing npm package. This is also a public package. You already done. Npm run build so it will just create a live folder with the both the support, cgs and esf. Now we just need to do npm publish same as we are doing for the npm publish right now.

It will just see okay, where you’re logged in i’m logged in with npm, so it will just push this package now. If you wanted to see where it is published, and we can just see at github here, you can see. I have this test package and it is published auto product one right and I just have a dummy, redo file. I will just clean it just to see so if you wanted to use it, then npm install this. You have to use it in your code and this is how you will define it in your package.

Json okay, so your package is published here, 1.4.1 right, and so when you have a github package, you will just use the you can use the github actions to actually Create a tag for the previous package, so you will have you will maintain the the previous packages also and their code also right, so you can just create a github tag before publishing the new package and you should maintain the consistency of this versioning 1.

1 major miner And patch version – and you should be running all this – you can just configure a basic pipeline like this travis, where you will doing npm install and payment, build, npm, run test, and then npm pack or npm publish what it just needed. It just needed a github token, which you can just use the github environment variables to pass it okay, but here we just talked about how you can just create a basic package or basic library and can publish it to npm and github.

It just matter of your typing or ps, config and the compiler options. What you are targeting you just need to take care of very few things. Declaration should be true, you just define output directory your target and your module system. Module system can be a common js or can be. Es6 is 1020 here. For this I am using common js module pattern. I just creating the different different bundles. So when your package is being imported, you can import it as a requirements: module sorry, common js module where you are just doing a require, or you can use the import export like a es6 module where you can use it.

So the same code base, a typescript enabled where you have the typings defined, can be used as a es6 module as a common js module so most of the packages what they like is they don’t have the type type definitions available. So what they create is they create a type pack type definitions as a separate module right. Are they types? If you see so here around this, you will see type node s react react dom.

So if you have a big library, then you can define the typing separately right. So we have a node and type nodes, so it is providing the type definitions for all the node.Js core library things: okay, okay, so this is all about how you can publish a library written in the typescript and node.Js I mean we are just writing typescript and Javascript and you can publish it for the common json es6 module thanks.

Everyone thanks for reading. Please like subscribe, my blog, if you like the article


 

Categories
Online Marketing

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.