{"id":4566,"date":"2020-07-17T05:02:00","date_gmt":"2020-07-17T05:02:00","guid":{"rendered":"https:\/\/azoora.com\/blog\/?p=4566"},"modified":"2020-07-12T10:23:16","modified_gmt":"2020-07-12T10:23:16","slug":"tutorial-build-your-first-deno-app-with-authentication","status":"publish","type":"post","link":"https:\/\/azoora.com\/blog\/framework\/tutorial-build-your-first-deno-app-with-authentication\/","title":{"rendered":"Tutorial: Build Your First Deno App with Authentication"},"content":{"rendered":"\n

The creator of Node.js<\/strong>, Ryan Dahl<\/strong> has authored a new framework<\/strong> for designing web applications. He went back and fixed some mistakes he made in hindsight, taking advantage of new technologies that were not available at the time he originally wrote Node. The result is\u00a0Deno<\/a>\u00a0<\/strong>(pronounced DEH-no<\/strong>), a framework for writing “Node-like” web applications in TypeScript. Here, We’ll help you will walk-through creating a basic web app with authentication.<\/p>\n\n\n\n

You can find almost all the information you need at the Deno website \u2014along with information on all the third-party libraries that are currently available for Deno. That is really the biggest drawback to the framework right now. It just hit version 1.0 on May 13th of 2020, so even though there are quite a few essential libraries, there are not nearly as many libraries as there are for Node. For those who are proficient in Node however, the transition to Deno should be pretty easy.<\/p>\n\n\n\n

You can find the installation instructions at https:\/\/deno.land\/#installation<\/a>.<\/p>\n\n\n\n

1. Create Your Deno Application<\/h2>\n\n\n\n

There aren’t any basic scaffolding libraries that we could find, so We just started with an empty folder. In the application’s root folder, create a file called\u00a0index.ts<\/code>\u00a0that will be the starting point of your Deno application. You’ll use\u00a0Opine<\/a>, which is an Express clone for Deno to make building and routing easier.<\/p>\n\n\n\n

One thing that is different about Deno is that there are no package managers for bringing in third-party libraries. You do this by using the library’s full URL. Do that at the top of the index.ts<\/code> file, then set up a basic web application.<\/p>\n\n\n\n

import { opine } from 'https:\/\/deno.land\/x\/opine@0.12.0\/mod.ts';\n\nconst app = opine();\n\napp.get('\/', (req, res) => {\n  res.send('Deno Sample');\n});\n\napp.listen(3000);\nconsole.log('running on port 3000');<\/code><\/pre>\n\n\n\n
You can then run this very basic application by going to the terminal in the application’s folder and entering:<\/p>\n\n\n\n
deno run -A index.ts<\/code><\/pre>\n\n\n\n
The -A<\/code> is a shortcut for development purposes. Deno is completely locked down by default, so you’ll need to pass arguments to the run<\/code> command to allow access like --allow-net<\/code> to allow networking, and --allow-read<\/code> to allow the application to read from the file system. The -A<\/code> used here allows everything, effectively disabling all security. When you run this application and then go to http:\/\/localhost:3000<\/code> you should be greeted with Deno Sample<\/strong> on a blank page.<\/p>\n\n\n\n
2. Build a Real Web Application with Deno<\/h2>\n\n\n\n
While this is a good first step, it’s not very useful. You’ll want to add some real<\/em> functionality that’s a little more “real-world”, so change the index.ts<\/code> file so that the contents are:<\/p>\n\n\n\n
import { opine, serveStatic } from 'https:\/\/deno.land\/x\/opine@0.12.0\/mod.ts';\nimport { renderFileToString } from 'https:\/\/deno.land\/x\/dejs@0.7.0\/mod.ts';\nimport { join, dirname } from 'https:\/\/deno.land\/x\/opine@main\/deps.ts';\n\nimport { ensureAuthenticated } from '.\/middleware\/authmiddleware.ts';\nimport users from '.\/controllers\/usercontroller.ts';\nimport auth from '.\/controllers\/authcontroller.ts';\n\nconst app = opine();\nconst __dirname = dirname(import.meta.url);\n\napp.engine('.html', renderFileToString);\napp.use(serveStatic(join(__dirname, 'public')));\napp.set('view engine', 'html');\n\napp.get('\/', (req, res) => {\n  res.render('index', { title: 'Deno Sample' });\n});\n\napp.use('\/users', ensureAuthenticated, users);\napp.use('\/auth', auth)\n\napp.listen(3000);\nconsole.log('running on port 3000');<\/code><\/pre>\n\n\n\n
You’ll notice some more\u00a0import<\/code>\u00a0statements which bring in some third-party libraries. Here, We’re using\u00a0dejs<\/a>\u00a0which is an EJS port for Deno. We’ve also included some utility classes from the Opine library for manipulating directory names. We’ll explain what the three files imported locally are in a moment. For now, just know that you’re importing them.<\/p>\n\n\n\n
The line below the instantiation of the\u00a0opine()<\/code>\u00a0app creates a reference to the local directory. The three lines below use this to set the view engine to DEJS for processing the HTML-like files, similar to the way EJS does for Node. The next section has been changed slightly to render one of those HTML template files, and the last two lines bring in some external routes. One thing of note is that the\u00a0\/users<\/code>\u00a0route has an ensureAuthenticated()<\/code> middleware function. This will force users to log in before being allowed to visit the page. You’ll create that middleware shortly.<\/p>\n\n\n\n
3. Fill In Your Deno Application<\/h2>\n\n\n\n
Now, you’ll want to create some of the missing pieces that you imported above. Start with the routes. Create a folder called controllers<\/code> in the root of the application. Then add a usercontroller.ts<\/code> file inside that folder with the following contents:<\/p>\n\n\n\n
import { Router } from 'https:\/\/deno.land\/x\/opine@0.12.0\/mod.ts';\n\nconst users = new Router();\n\n\/\/ users routes\nusers.get('\/me', (req, res) => {\n  res.render('users\/me', { title: 'My Profile', user: res.app.locals.user });\n});\n\nexport default users;<\/code><\/pre>\n\n\n\n
This is a simple routing file. It gets the router from Opine and creates a new instance to hang routes from. Then there is code to add a route for \/me<\/code> to render the HTML view in users\/me<\/code>. The render()<\/code> call also passes a title and the logged-in user to the page. This page will be protected so that there will always be a user to pass to the page.<\/p>\n\n\n\n
Next, create some views to show when the routes are hit. In the root folder, add a views<\/code> folder. Inside that, create a shared<\/code> folder and a users<\/code> folder. In the shared<\/code> folder create a header.html<\/code> and footer.html<\/code> file. In the users<\/code> folder add a me.html<\/code> file. Finally, in the views<\/code> folder itself create an index.html<\/code> file.<\/p>\n\n\n\n
These are pretty bare-bones, but it demonstrates how to create views that can be reused by other views. In the shared\/header.html<\/code> file add the following:<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n  <meta charset=\"utf-8\">\n  <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n  <title><%= title %><\/title>\n<\/head>\n\n<body><\/code><\/pre>\n\n\n\n
This outputs the top of an HTML page and injects the title into the page. Next, add the following to the shared\/footer.html<\/code> file:<\/p>\n\n\n\n
<\/body>\n\n<\/html><\/code><\/pre>\n\n\n\n
Now you can use those partials in the index.html<\/code> file:<\/p>\n\n\n\n
<%- await include('views\/shared\/header.html', { title }); %>\n\n<a href=\"\/users\/me\">My Profile<\/a>\n\n<%- await include('views\/shared\/footer.html'); %><\/code><\/pre>\n\n\n\n
This includes the footer and header partials and adds a link to the profile page. The contents of the users\/me.html<\/code> file are:<\/p>\n\n\n\n
<%- await include('views\/shared\/header.html', { title }); %>\n\n<h1>My Profile<\/h1>\n\n<ul>\n<% for(var p in user){ %>\n  <li><strong><%= p %>: <\/strong><%= user[p] %><\/li>\n<% } %>\n<\/ul>\n\n<%- await include('views\/shared\/footer.html'); %><\/code><\/pre>\n\n\n\n
Again, this page includes the header and footer, and loops through the properties of the user<\/code> object. Granted, it’s not a super-sexy profile page, but it will let you know that the authentication steps all worked.<\/p>\n\n\n\n
4. Add Authentication with Okta<\/h2>\n\n\n\n
If you don’t already have an Okta account, you can get a free developer account\u00a0here<\/a>. Once you’ve signed into Okta, you’ll land on the dashboard. You’ll need to create an Okta app to take advantage of Okta as an Identity Provider for your project.<\/p>\n\n\n\n
Click on\u00a0Applications<\/strong>\u00a0in the menu, then\u00a0Add Application<\/strong>. This will take you to the application wizard. Choose\u00a0Web<\/strong>\u00a0for your platform, then click\u00a0Next<\/strong>. The next page is the\u00a0Application Settings<\/strong>\u00a0page. Give your application a name (We named our as DenoExample<\/strong>). Change all the URLs to use port\u00a03000<\/code>\u00a0instead of\u00a08080<\/code>, then change the\u00a0Login Redirect URIs<\/strong>\u00a0to\u00a0http:\/\/localhost:3000\/auth\/callback<\/code>. This is a route you’ll be implementing shortly. Finally, click\u00a0Done<\/strong>\u00a0to finish creating the application in Okta.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Once you’re on the page for your newly-created application, make sure you’re on the General Settings<\/strong> tab and scroll to the bottom until you see a Client Credentials<\/strong> section. You’ll be using these values momentarily, so keep this window open.<\/p>\n\n\n\n
Back in your application, create a new file in the root of the application called .env<\/code>. The contents of the file will be:<\/p>\n\n\n\n
issuer=https:\/\/{yourOktaOrgUrl}\/oauth2\/default\nclientId={yourClientID}\nclientSecret={yourClientSecret}\nredirectUrl=http:\/\/localhost:3000\/auth\/callback\nstate=SuPeR-lOnG-sEcReT<\/code><\/pre>\n\n\n\n
Copy the Client ID and Client Secret from the\u00a0Client Credentials<\/strong>\u00a0section of your Okta app. Then go back to the dashboard and copy your Okta org URL from the right-hand side just below the menu.<\/p>\n\n\n\n
Now you’re ready to start talking to Okta for authentication. Unfortunately, We couldn’t find any OpenID Connect (OIDC) libraries to make authentication with OAuth 2.0 and OIDC easier than this, so you’ll have to create it by hand. However, this can be an awesome exercise to help understand how OAuth and OIDC work. In the root folder of your app, create a new folder called\u00a0middleware<\/code>\u00a0and add a file called authmiddleware.ts<\/code>. Then add this content:<\/p>\n\n\n\n
import { config } from 'https:\/\/deno.land\/x\/dotenv\/mod.ts';\n\nexport const ensureAuthenticated = async (req:any, res:any, next:any) => {\n  const user = req.app.locals.user;\n  if(!user){\n    const reqUrl = req.originalUrl;\n    const {issuer, clientId, redirectUrl, state} = config();\n    const authUrl = `${issuer}\/v1\/authorize?client_id=${clientId}&response_type=code&scope=openid%20email%20profile&redirect_uri=${encodeURIComponent(redirectUrl)}&state=${state}:${reqUrl}`;\n    res.location(authUrl).sendStatus(302);\n  }\n  next();\n}<\/code><\/pre>\n\n\n\n
First, bring a library for reading the\u00a0.env<\/code>\u00a0file. The\u00a0dotenv<\/a>\u00a0does this beautifully. Then you’ll implement the ensureAuthenticated()<\/code> middleware that starts the first step of the authentication process. First, it checks to make sure the user isn’t already logged in. If they are, it just calls\u00a0next()<\/code>\u00a0because there is nothing to do.<\/p>\n\n\n\n
If there isn’t a currently logged in user, it builds a URL made up of the issuer, clientId, redirectUrl, and state properties from the\u00a0.env<\/code>\u00a0file. It makes a call to the\u00a0\/v1\/authorize<\/code>\u00a0endpoint of the issuer’s URL. It then redirects to that URL. This is a login page hosted by Okta. Kind of like when you’re redirected to Google to log in with Google as the identity provider. The URL that it will call when login is done is the http:\/\/localhost:3000\/auth\/callback<\/code> URL that’s in the\u00a0.env<\/code>\u00a0file. We’ve also tagged the original URL that the user was going to when they were redirected to the\u00a0state<\/code>\u00a0query parameter. This will make it easy to direct them back there once they’ve logged in.<\/p>\n\n\n\n
Next, you’ll need to implement the auth\/callback<\/code> route to handle the result from the login page and exchange the authorization code that you’ll receive from Okta. Create a file called authcontroller.ts<\/code> in the controllers<\/code> folder with the contents:<\/p>\n\n\n\n
import { Router } from 'https:\/\/deno.land\/x\/opine@0.12.0\/mod.ts';\nimport { config } from \"https:\/\/deno.land\/x\/dotenv\/mod.ts\";\n\nconst auth = new Router();\n\n\/\/ users routes\nauth.get('\/callback', async (req, res) => {\n const { issuer, clientId, clientSecret, redirectUrl, state } = config();\n\n if (req.query.state.split(':')[0] !== state) {\n   res.send('State code does not match.').sendStatus(400);\n }\n\n const tokenUrl: string = `${issuer}\/v1\/token`;\n const code: string = req.query.code;\n\n const headers = new Headers();\n headers.append('Accept', 'application\/json');\n headers.append('Authorization', `Basic ${btoa(clientId + ':' + clientSecret)}`);\n headers.append('Content-Type', 'application\/x-www-form-urlencoded');\n\n const response = await fetch(tokenUrl, {\n   method: 'POST',\n   headers: headers,\n   body: `grant_type=authorization_code&redirect_uri=${encodeURIComponent(redirectUrl)}&code=${code}`\n });\n\n const data = await response.json();\n if (response.status !== 200) {\n   res.send(data);\n }\n const user = parseJwt(data.id_token);\n req.app.locals.user = user;\n req.app.locals.isAuthenticated = true;\n res.location(req.query.state.split(':')_[_1] || '\/').sendStatus(302);\n});\n\n\nfunction parseJwt (token:string) {\n  const base64Url = token.split('.')_[_1];\n  const base64 = base64Url.replace(\/-\/g, '+').replace(\/_\/g, '\/');\n  const jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {\n      return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);\n  }).join(''));\n\n  return JSON.parse(jsonPayload);\n};\n\nexport default auth;<\/code><\/pre>\n\n\n\n
There is actually a lot less going on here than you might think. First, the imports bring in the\u00a0Router<\/code>\u00a0from Opine and read in the\u00a0.env<\/code>\u00a0file again. Then they instantiate the router like in the\u00a0usercontroller.ts<\/code>\u00a0file. The next thing we did was deconstruct the config object to make it easier to use the values. Next, we checked the\u00a0state<\/code>\u00a0query parameter to make sure it matches. This helps ensure that Okta is the one who sent the authorization code. Then the authorization code gets pulled off the query string with\u00a0req.query.code<\/code>.<\/p>\n\n\n\n
What happens next is a call to the token endpoint. You’ll send the authorization code in a\u00a0POST<\/code>\u00a0request to Okta to exchange for an ID Token. So, here we’ve built some headers for the request. The most important is the\u00a0Authorization<\/code>\u00a0header that has a value of\u00a0Basic {yourClientId}:{yourClientSecret}<\/code>\u00a0the client ID and secret are base64 encoded. Then the\u00a0POST<\/code>\u00a0call is finally made to the token endpoint with those headers and a body with a\u00a0grant_type<\/code>\u00a0of\u00a0authorization_code<\/code> \u2014 the same redirect URL as before \u2014 and the authorization code we just received from Okta.<\/p>\n\n\n\n
The\u00a0fetch()<\/code>\u00a0call returns a promise resolved with the\u00a0then()<\/code>\u00a0function. We get the\u00a0response<\/code>\u00a0object’s JSON value, make sure the call was successful, parse the\u00a0id_token<\/code>\u00a0value with the\u00a0parseJwt()<\/code>\u00a0function below and stick it into a local variable called\u00a0user<\/code>. Finally, the user is sent to the URL they originally requested before being redirected for authentication.<\/p>\n\n\n\n
5. Run the Deno Application<\/h2>\n\n\n\n
You can now run the application from the terminal again with:<\/p>\n\n\n\n
deno run -A index.ts<\/code><\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Once it’s running you’ll be able to click on the profile link on the home page and will be redirected to Okta’s hosted login page. Once you’ve logged in, you’ll be directed back to the profile page and you’ll see your ID token’s properties displayed in a list.<\/p>\n","protected":false},"excerpt":{"rendered":"
The creator of Node.js, Ryan Dahl has authored a new framework for designing web applications. He went back and fixed some mistakes he made in hindsight, taking advantage of new technologies that were not available at the time he originally wrote Node. The result is\u00a0Deno\u00a0(pronounced DEH-no), a framework for writing “Node-like” web applications in TypeScript. […]<\/p>\n","protected":false},"author":2,"featured_media":4568,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[102,145,7,62],"tags":[103,146,28,110],"jetpack_featured_media_url":"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/07\/Build-Your-First-Deno-App-With-Authentication.png","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/p7FQPL-1bE","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/4566"}],"collection":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/comments?post=4566"}],"version-history":[{"count":1,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/4566\/revisions"}],"predecessor-version":[{"id":4570,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/4566\/revisions\/4570"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media\/4568"}],"wp:attachment":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media?parent=4566"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/categories?post=4566"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/tags?post=4566"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}