Create a Full-Stack Rails and Ember App

3.2 Application Layout and Authentication

Hi and welcome back to create a full stack Rails and Ember app. In the last lesson, we generated our new Ember CLI application and added CoffeeScript, Sass, and Bootstrap. In this lesson we are going to create our basic application layout and implement the authentication of Google or Auth. The first thing we have to do is to install some items. For this project we are going to use one of the most used authentication solutions in Ember, Ember Simple Auth. And we will combine it with Torii which provides a number of providers for different platforms like Google, Facebook and such. So let's jump into the shell and install them. We can do this like in the last lesson, that's the Ember install command. First, ember-simple-auth and then torii. We also need another SM which is ember-cli-ic-ajax, to be able to make requests to our server for authentication purposes. Although we just installed the authentication items, I will actually get started with a layout in part. So let's add it the application.hbs template. I'm going to add a top navbar here, I need to use some CSS classes. One is navbar, then navbar-full which makes it full width. And also navbar-dark to have light text as well as a new class called bg-primary to get a nice blue background. We can wrap the content in a container to make it the same width as our main content. So let's build the elements. First the title all implementors with a link to helper pointing to the application route having the content relationship. On the right side, we want to have a button to log in or out. In bootstrap for the pull left and right classes have changed to also include size part like the grid system has. So when I use pull-sm-right it won't get floated to the right side on mobile devices. I'm not going to add the buttons just yet, but only add a comment that they belong there in the future. Now for our main section, let's get rid of the h2 tag from the generator and replace it with our own content. First, I'm giving the wrapper container a custom class, then I'm going to add some navigation. Even though I added a navbar, I wanted this more for styling purposes than for actual navigation. So first, we need a row and then a nav class with a column width of two. Inside I'm going to add a list with the classes nav, nav-stack to have a radical navigation list and nav-pills for the style. Navigation lists have changed quite a bit in bootstrap four. Each list item now gets the nav-item class and each A tag gets a class of nav-link. Since I've got only the application route right now, I will be using that. Otherwise, Ember would complain. That's duplicated a couple of times and length to project, our first tasks and maybe add another one for companies. On to the main content section. We will make this seven columns right and let's also right side bar right now, we're just going to be three columns wide. And holds, for instance, a task list. Let's also add some styling. I don't want the whole page to have a white background. So let's make it a light gray. The main wrapper will be white and have a padding of 1m and 1.5m. As well as a bit of a box-shadow to make it visually more interesting. So let's look at the app in the browser. If you have used Ember and Twitter Bootstrap before, you might know, that navigation was always a bit of a mess since getting the link to be highlighted was a hassle. With Bootstrap 4 those days are gone. Amber automatically assigns the active class to the link if the router is active. And bootstrap changed the location of its active class from the list item to the link as well. Finally a working navigation out of the box. Of course, all links are highlighted now, since the application route is always active. Lay-outing done, let's move on to the authentication part. The first thing we have to do, is to edit the environment file. Because we have to add configuration for torii. Within the torii key we can set the providers we support, in our case of google-oauth2. There we need to set the redirect URI which is going to be localhost:4200/ /oauth2callback. As well as the apiKey, which I will set from the environment variables. This is possible in development since we are running a node based web server underneath. Now we have to build our authentication mechanism. Let's start with the simple stuff, buttons. In the application template, we can add some to the navbar and the simple auth, provides an authentication session that hast is authenticated property. Which we can query to determine if the user currently is logged in or not. If not, I want a button with some CSS classes and an action to log in as well as a label of log in. We can copy that and replace log in with logout. To make the actions actually do something we have to add a controller. In our case, the application controller. The first thing we need to do by our file is to import the Ember class as well as adding an export of the default module. This has to use back ticks around it since CoffeeScript doesn't support the importing and exporting syntax. And with back ticks we tell CoffeeScript that this is literal JavaScript code. The first thing to do is to inject the session service provided by Ember Simple auth into the controller. Then we can handle the logging action. We want to use the session to authenticate using an authenticator called Google which we will create in a minute and pass the Google provider as well. For the lockout action we will just call invalidate. As you can see, you normally don't call variables directly. Let's call with this.get. Now we have to create our custom authenticator. Here, we also need the ToriiAuthenticator provided by emper-simple-auth. We also want the ENV hash from the environment config. Our Google Authenticator is inheriting from ToriiAuthenticator. First we need the Torii service, we are going to inject it here. We could also provide a name for the injection. Or when the service name is the same as the variable we are storing it in we can omit it. Remember the AJAX add on we installed? We are going to need it here also injected as a service. Now we can override the authenticate method. We will return a promise here, it takes a function with two callbacks, resolve and reject. Now we can cause super with the arguments. And when the promise as so ll be returned is fulfilled. We want to use the return data object for or own authentication workflow. So we're going to use ajax too make a post request to our authorization end point. And I'm using an environment variable here to define the host. As for parameters, I'm going to send the grand type as Google off code which we don't really need. But when we extend logging possibilities to Facebook or Twitter, the server knows what to use. The more important parameter is the authorization code we receive from the Google service. This again returns a promise that will be fulfilled when we receive a response from our back-end. Here we want to resolve our own promise we created in the first line and provide the authentication data. So, far as the provider we used, then the access token from the server response, as well as the email address. If the request failed, we are going to provide, reject, or the call back here. As well as for the super method, now for the API host. We can set this in the environment config file since normally the endpoint defaults to the host and port the front of the application is served from. Since our backend server is localhost:3000, we need to manually set this value. Now we need to talk about the provider as well. In the controller, we set provider to Google. Torii doesn't have a Google provider, it just has one that is called google-oauth2. It doesn't exactly do what we need it to. Let me demonstrate this quickly. Before we can do this server. Now when we want to look again it will open a pop up you might have seen elsewhere. Stating the relationship app wants to know who you are and for your email address. When we allow this. The button on the top right corner. Changes to look out. Meaning. We have an authenticated session. When you open the console you can see that there is an error that it won't connect to the authorization end point. Because it violates the content security policy directive. So what is this a content security policy is a concept that helps preventing cross side scripting attacks. Embassy, i currently uses this by default. But it will be removed with the next release. Since apparently, it created a lot of confusion for new users. I'm going to leave this in and explain it to you though. In the environment file, we can add the content security policy key. These are the defaults, as you can see, it is very restrictive. In the content source section, which is the part that allows AJAX requests, I'm going to add local host. Three thousand. When i log out and log in again, it won't complain anymore. Now for our issue with our torii provider. When i look at the local storage section and the resources tap. I can see it is local storage about my session. You can see the access token here. When I reload though, this data is gone. The provider simply doesn't support restoring the data and it gets removed. Luckily, this is a quick fix. We need to create a new file under torii-authenticators and we are going to call the file google coffee. We are going to import the Google0outh through provider from tory. Here we can extend it and provide a fetch method which just returns to supply data. Normally this is designed to hit to serve again to refresh the access token. But since ours doesn't expire there is no need to do so. Also did I say torii-authenticators, I surely meant torii-providers so let's rename the directory. Now we can replace the google-oauth2 provider with our own. To clear the session, we can log out and log in again. So, we get our authentication data, either refresh the page now it stays. In this lesson we created our main application layout and implemented the earth authentication workflow with Google. In next lesson we will create an interface to manage contacts and companies with out Ember app, see you there.