DEV Community: Matthias 🤖

Kubernetes

Matthias 🤖 — Sun, 10 Nov 2019 10:24:47 +0000

True story...

// Detect dark theme var iframe = document.getElementById('tweet-1158764816426840064-152'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1158764816426840064&theme=dark" }

Kubernetes is hard and definitely not for everyone.
Even managed Kubernetes environments (e.g. Google Kubernetes Engine, Amazon Elastic Kubernetes Service, Azure Kubernetes Service or DigitalOcean Kubernetes) don't make it easier to handle.

Anyway, KubeCon San Diego starts next weeks! I hope anyone who's attending will have a great time!

Services for your JAMstack Application

Matthias 🤖 — Thu, 07 Nov 2019 10:15:01 +0000

🖥 Hosting

Netlify: Deploy modern static websites with Netlify. Get CDN, Continuous deployment, 1-click HTTPS, and all the services you need.
GitHub Pages: Websites hosted directly from your GitHub repository.
Zeit: Host your web projects with zero configuration, automatic SSL, and global CDN.
Firebase: Firebase simplifies your web hosting with tools made specifically for modern web apps. When uploading web assets, Firebase automatically pushs them to Googles global CDN and adds a free SSL certificate.

🗄 CMS

Sanity: A rather new product is Sanity. Apart from the GraphQL based API, Sanity comes with a fully customizable React based Studio.
Contenful: Contentful is how modern companies work with content. It’s content infrastructure for creating and managing content, backed by the tools for delivering it anywhere. With Contentful, developers and editors can work simultaneously and ship digital products faster.
GraphCMS: GraphCMS enables developers to build powerful content APIs in a matter of minutes, while it gives content creators all the tools they need to manage their content. The hosted content APIs can be easily consumed by websites, apps or any other platform.
Prismic: With Prismic, teams of developers and marketers/editors/content managers can create websites and apps with instantly updatable content and custom design.
DatoCMS: DatoCMS serves content (e.g. articles, images) via a GraphQL-API. A feature that I didn't see in other headless CMS is the possibility to structure your content in a tree model.

⒡ Functions

Netlify Functions: Write JavaScript or Go APIs to perform just about any backend task, scaling automatically as demand increases.
Firebase Cloud Functions: Create functions that are triggered by Firebase products, such as changes to data in the Realtime Database, new user sign-ups via Auth, and conversion events in Analytics.

📚 Database

Airtable: Airtable works like a spreadsheet but gives you the power of a database to organize anything.
FaunaDB: FaunaDB is a serverless cloud database that offers fast global access to data via modern APIs like GraphQL without sacrificing data consistency. Ubiquitous, flexible and secure, FaunaDB helps modern developers build applications fearlessly.
8base: Build and run cloud-based enterprise applications faster using JavaScript, GraphQL, and 8base.
Firebase Realtime-Database: The Firebase Realtime Database is a cloud-hosted NoSQL database that lets you store and sync data between your users in realtime.
MongoDB Atlas: MongoDB Atlas is the global cloud database service for modern applications. Deploy fully managed MongoDB across AWS, Azure, or GCP.

🔎 Search

Algolia: Algolia is a powerful hosted search API. They offer clients for many languages and frameworks. I use Algolia for some projects and I can absolutely recommend it.

📝 Forms

Netlify Forms: Manage forms and submissions without any server-side code or JavaScript.
Basin: Deploy a powerful, easy-to-configure form backend without writing a single line of server side code.

🔐 Auth

Auth0: Auth0 provides a universal authentication & authorization platform for web, mobile and legacy applications.
Netlify Identity: Manage signups, logins, password recovery, and more - all without rolling your own authentication service.
Firebase Authentication: Firebase Authentication aims to make building secure authentication systems easy, while improving the sign-in and onboarding experience for end users. It provides an end-to-end identity solution, supporting email and password accounts, phone auth, and Google, Twitter, Facebook, and GitHub login, and more.
Okta: Secure, scalable, and highly available authentication and user management for any app.

💸 Payment

Stripe: Stripe builds the most powerful and flexible tools for internet commerce (e.g. subscription services, on-demand marketplaces or e-commerce stores).
PayPal: Simple online payments solution that’s easy to integrate into e-commerce sites.
Braintree: Braintree is a subsidiary company of PayPal. Braintree processes payments online, including credit cards, debit cards, digital wallets, PayPal, Venmo, Apple Pay, and Google Pay in a single integration.

🖼 Media

Cloudinary: Image, video and digital asset management.
imgix: imgix transforms, optimizes and caches your images.
uploadcare: Image and file hosting. Uploadcare also offers image processing.

If you like my content, you might want to follow me on Twitter?! @fullstack_to

Cover Image by Maxim Selyuk on Unsplash

Useful Tools: ApacheBench (ab)

Matthias 🤖 — Wed, 30 Oct 2019 07:48:47 +0000

Website: https://httpd.apache.org/docs/2.4/programs/ab.html

ApacheBench (ab) is a command line application for bench marking your web application. It was originally developed to test the Apache HTTP server but it is not limited to it — you can use the tool to test any web server.

Installation

ApacheBench (ab) is bundled in the apache2-utils package.
You can install it on Debian/Ubuntu platforms with apt-get install -y apache2-utils.
If you're on a macOS powered system, ab is already installed, because macOS ships with Apache HTTP server.

Usage

Suppose we want to see how fast example.com can handle 100 requests (-n 100), with a maximum of 10 requests (-c 10) running concurrently.

ab -n 100 -c 10 https://example.com/

ApacheBench (ab) will then generate the following output:

Server Software:        ECS
Server Hostname:        example.com
Server Port:            443
SSL/TLS Protocol:       TLSv1.2,ECDHE-RSA-AES128-GCM-SHA256,2048,128
Server Temp Key:        ECDH P-256 256 bits
TLS Server Name:        example.com

Document Path:          /
Document Length:        1256 bytes

Concurrency Level:      10
Time taken for tests:   4.990 seconds
Complete requests:      100
Failed requests:        0
Total transferred:      160293 bytes
HTML transferred:       125600 bytes
Requests per second:    20.04 [#/sec] (mean)
Time per request:       499.031 [ms] (mean)
Time per request:       49.903 [ms] (mean, across all concurrent requests)
Transfer rate:          31.37 [Kbytes/sec] received

Connection Times (ms)
              min  mean[+/-sd] median   max
Connect:      309  339  18.4    338     383
Processing:   100  108   6.3    106     129
Waiting:       99  106   6.2    104     124
Total:        410  447  22.1    446     511

Percentage of the requests served within a certain time (ms)
  50%    446
  66%    453
  75%    459
  80%    463
  90%    479
  95%    488
  98%    505
  99%    511
 100%    511 (longest request)

You can get some really useful information from it.

Complete requests:      100
Failed requests:        0

These two lines tell us, that not a single request failed. Which in fact means, that your setup is capable of serving this amount of requests.

Requests per second:    20.04 [#/sec] (mean)
Time per request:       499.031 [ms] (mean)
Time per request:       49.903 [ms] (mean, across all concurrent requests)

This part gives us information on the number of requests per second your application was able to fulfil.

Requests per second gives you an idea of how well your web application is performing. The larger the number, the better the performance.

Time per request (mean) tells you the average amount of time it took for a concurrent group of requests to process (so in our case 10 requests took 499.031ms).

Time per request (mean, across all concurrent requests) tells you the average amount of time it took for a single request to process.

Connection Times (ms)
              min  mean[+/-sd] median   max
Connect:      309  339  18.4    338     383
Processing:   100  108   6.3    106     129
Waiting:       99  106   6.2    104     124
Total:        410  447  22.1    446     511

These figures show you the component breakdown of each request.

Connect gives you information about the time it took to establish connection with your server (which is most typically the network latency).

The Processing time is the total amount of time the web application took to process and send a complete response.

Waiting is the time-to-first-byte after the request was sent.

Alternatives to ApacheBench (ab)

Apache JMeter: Apache JMeter is a Java based application for analyzing and measuring the performance of web applications. As opposed to ApacheBench, JMeter has a GUI to create load test scenarios. JMeter supports variable parameterization, assertions (response validation), plugins, configuration variables and report generation. Apart from the outdated GUI, JMeter is in any case a very good (and free) tool for creating complex load test scenarios.
loadtest: loadtest is an easy to use, Node.js based alternative to ApacheBench (ab).
weighttp: weighttp is a lightweight and small benchmarking tool for web servers. I've never used it, though.
artillery: Artillery is a Node.js based load-testing toolkit. Artillery allows you to test HTTP, Socket.io, WebSockets, and AWS Kinesis. You can also emulate complex user behaviour. There is also a paid version to run distributed load tests. Unfortunately I cannot give you any further information or insights, because I did not used Artillery yet.

Conclusion

I hope you find this article useful and you give ApacheBench (ab) a try.
In my opinion it is a great tool for quickly load testing your web application. If you know how to use it, you get useful results and metrics on how your web application performs.

If you like my content, you might want to follow me on Twitter?! @fullstack_to

Switching to Zsh (the new macOS default shell)

Matthias 🤖 — Mon, 14 Oct 2019 17:18:05 +0000

With the release of macOS Catalina, the Z shell became the standard macOS shell.

I used Bash for many years, but I am willing to switch to zsh.
I already installed Oh My Zsh and added some aliases I used before.

Do you have any good advices or snippets which might be helpful?

What Terminal Application do you use on macOS?

Matthias 🤖 — Sat, 28 Sep 2019 11:02:36 +0000

Some of my colleagues recently switched to Hyper. I'm still using iTerm 2 and I am very happy, so I don't see a reason to switch.

iTerm 2

Hyper

(Thank you @jakewca for the screenshot!)

What Terminal Application do you use on macOS? Do you use any tweaks?

JavaScript Import in VSCode IntelliSense

Matthias 🤖 — Wed, 11 Sep 2019 11:33:34 +0000

I try to set up a JavaScript project in Visual Studio Code.
Everything works fine, except IntelliSense. In my particular case, I added Styled Components and PropTypes, but both packages won't get suggested as import.

I already created a jsconfig.json file in my project root, but that didn't help either.

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "jsx": "react",
    "allowSyntheticDefaultImports": true
  },
  "exclude": ["node_modules", "public", ".cache"]
}

Is there anything else I need to configure, or do I have to install an extension?

Would be awesome if anyone can help 🥳

How do you use GitHub Actions?

Matthias 🤖 — Tue, 27 Aug 2019 18:16:15 +0000

Today I was invited to GitHub Actions Beta 🥳.

Does anyone use GitHub Actions already? What are your use cases?
Do you have some good examples?

Is anyone using GitHub Actions in production?

Use Auth0 to secure your NestJS application

Matthias 🤖 — Tue, 20 Aug 2019 14:37:30 +0000

TL;DR: In this article, I will explain how you can protect your NestJS based API with Auth0. Besides that, the Auth0 Management API is included to receive the current logged in user's profile.
If you don't want to read the article, you can directly head over to the GitHub repository.

Last week I struggled with connecting Auth0 to my NestJS project.
I wanted to restrict certain endpoints of my API to be publicly available.
Since I don't want to store user data and passwords on my own server, I decided to use Auth0.

I have been using NestJS as a framework for my backend applications for some time now. NestJS makes it very easy for new users to start.
It offers a mature CLI and many useful features are already available and can be integrated into the project as needed (e.g. database connections, validation, logging or http requests).

I was desperate and could not find a working solution. I asked for help on Twitter and here on dev.to:

Article No Longer Available

// Detect dark theme var iframe = document.getElementById('tweet-1161644510704787458-791'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1161644510704787458&theme=dark" }

I received some direct message where I got really useful advises.
Unfortunately I could not make it work, so I decided to take a break for a couple of days and stop thinking about it.
This turned out as a very good idea, eventually I was able to solve the problem 🥳.

Configure Auth0

If you don't have an Auth0 account yet, you should head over to their sign up page to create one.
Auth0 offers a generous free tier, which offers passwordless user accounts, two social identity providers (like Google, Facebook, Twitter or GitHub) and support in their community.
For this tutorial and smaller side projects the free plan should be adequate.

Create API

When you're logged in to your dashboard, navigate to the APIs section and create an new API by hitting the Create API button.

You are then prompted for an API name and an identifier.
Auth0 suggests to use the url as identifier and a friendly name for you API.
The signing algorithm should be left with the default option (RS256).

Create Application

Auth0 asks for a type when you're creating a new application.
For this example, the type doesn't matter. For a publicly available application, you might want to read more about application types to choose a type that fits your purpose.

After the application was created, you need to configure an allowed callback URL. A callback URL is a location to which a user can be redirected after successfully authenticating.

Enable Auth0 Management API

Because we also want to read the profile of an authenticated user later on, we have to activate the Auth0 Management API for the application we just created.
The configuration for activating the Auth0 Management API can be found in the APIs tab.
Additionally the read:users scope has to be selected.

Login

We will need to generate an access token to use the API later. The token is generated via the Auth0 login form.
The login form is provided by Auth0 and accessible on your Auth0 tenant domain.
You'll also need your Auth0 client id. Both values can be copied from your application configuration page.

Replace the values in the URL and open it in your browser.

https://$AUTH0_DOMAIN/authorize?audience=http://localhost:3000&scope=SCOPE&response_type=code&client_id=$AUTH0_CLIENT_ID&redirect_uri=http://localhost:4200/login&state=STATE?prompt=none

After you've logged in with an SSO provider (Google is configured by default) or by using an email and password.
The login form will then redirect you to http://localhost:4200/login, which we configured before.
We don't care that there is no web application running, but you need to copy the value of the code query parameter and save it for later.
The code is required to generate the Bearer token.

Upate User Metadata

A great thing about Auth0 is, that you can attach metadata to user profiles.
You could use user metadata to link a user profile to other services (e.g. GitHub or dev.to profile) - I am sure you will find many other use cases.

Create new NestJS Application

$ npm i -g @nestjs/cli
$ nest new nestjs-auth0-jwt

If everything went well, a new NestJS application was created with the following directory structure:

nestjs-auth0-jwt
├── src
│   ├── app.controller.spec.ts
│   ├── app.controller.ts
│   ├── app.module.ts
│   ├── app.service.ts
│   └── main.ts
├── test
│   ├── app.e2e-spec.ts
│   └── jest-e2e.json
├── README.md
├── nest-cli.json
├── package-lock.json
├── package.json
├── tsconfig.build.json
├── tsconfig.json
└── tslint.json

Run Application

Navigate to the new directory and start the API:

$ cd nestjs-auth0-jwt
$ npm run start:dev

Once the application is running, you can open your browser and head to http://localhost:3000.

Add dependencies

$ npm install --save @nestjs/passport passport passport-jwt jwks-rsa auth0
$ npm install --save-dev @types/passport-jwt @types/auth0

Create Auth Module

$ nest generate module auth

Create JWT Strategy

$ touch auth/jwt.strategy.ts

import { passportJwtSecret } from 'jwks-rsa';
import { ExtractJwt, Strategy, VerifiedCallback } from 'passport-jwt';

import { Injectable, UnauthorizedException } from '@nestjs/common';
import { PassportStrategy } from '@nestjs/passport';

@Injectable()
export class JwtStrategy extends PassportStrategy(Strategy) {
  constructor() {
    super({
      secretOrKeyProvider: passportJwtSecret({
        cache: true,
        rateLimit: true,
        jwksRequestsPerMinute: 5,
        jwksUri: `https://${process.env.AUTH0_DOMAIN}/.well-known/jwks.json`
      }),

      jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken(), // 1
      audience: 'http://localhost:3000',
      issuer: `https://${process.env.AUTH0_DOMAIN}/`
    });
  }

  validate(payload: any, done: VerifiedCallback) {
    if (!payload) {
      done(new UnauthorizedException(), false); // 2
    }

    return done(null, payload);
  }
}

1: ExtractJwt.fromAuthHeaderAsBearerToken(): Creates a new extractor that looks for the JSON Web Token in the authorization header with the scheme 'bearer'.

2: If no payload is received, the authentication failed.

Update AuthModule

import { Module } from '@nestjs/common';
import { PassportModule } from '@nestjs/passport';

import { JwtStrategy } from './jwt.strategy';

@Module({
  imports: [PassportModule],
  providers: [JwtStrategy],
  exports: [JwtStrategy]
})
export class AuthModule {}

Create API Endpoints

import { ManagementClient, User } from 'auth0';
import * as express from 'express';

import { Controller, Get, Request, UseGuards } from '@nestjs/common';
import { AuthGuard } from '@nestjs/passport';

import { AppService } from './app.service';

@Controller()
export class AppController {
  constructor(private readonly appService: AppService) {}

  @Get()
  getHello(): string {
    return this.appService.getHello(); // 1
  }

  @Get('secret')
  @UseGuards(AuthGuard('jwt')) // 2
  secretEndpoint(@Request() req: express.Request): string {
    return 'this endpoint should be protected';
  }

  @Get('profile')
  @UseGuards(AuthGuard('jwt')) // 2
  async profile(@Request() req: express.Request): Promise<any> {
    const authZero = new ManagementClient({
      // 3
      domain: process.env.AUTH0_DOMAIN,
      clientId: process.env.AUTH0_CLIENT_ID,
      clientSecret: process.env.AUTH0_CLIENT_SECRET,
      scope: 'read:users update:users'
    });

    const response = await authZero
      .getUser({ id: req.user.sub }) // 4
      .then((user: User) => {
        return user;
      })
      .catch(err => {
        return err;
      });

    return response;
  }
}

1: Public available API endpoint.

2: @UseGuards(AuthGuard('jwt'))

3: Create Auth0 Management API Client.

4: The subject in the JWT response is identical to the Auth0 User ID. So the sub property is used as id parameter for the getUser call, which returns the entire user profile.

Use Login Code to retrieve Bearer-Token

$ export AUTH0_DOMAIN=${AUTH0_DOMAIN}
$ export AUTH0_CLIENT_ID=${AUTH0_CLIENT_ID}
$ export AUTH0_CLIENT_SECRET=${AUTH0_CLIENT_SECRET}
$ export CODE=${CODE}

$ curl -X POST -H 'content-type: application/json' -d '{
  "grant_type": "authorization_code",
  "client_id": "'$AUTH0_CLIENT_ID'",
  "client_secret": "'$AUTH0_CLIENT_SECRET'",
  "code": "'$CODE'",
  "redirect_uri": "http://localhost:4200"
}' https://$AUTH0_DOMAIN/oauth/token

{
  "access_token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImtpZCI6Ik9EQXpOMEZHTWpBd1FVUTJORFpETXpBMVJETXdSRUUyTjBSRE5qRXpNemRFUWtNMk5URTFNUSJ9.eyJpc3MiOiJodHRwczovL25lc3Rqcy1hdXRoMC1qd3QuYXUuYXV0aDAuY29tLyIsInN1YiI6Imdvb2dsZS1vYXV0aDJ8MTEzMDc2NzYwNTUyNTQ5MTY1ODQ5IiwiYXVkIjoiaHR0cDovL2xvY2FsaG9zdDozMDAwIiwiaWF0IjoxNTY1OTg1MzU3LCJleHAiOjE1NjYwNzE3NTcsImF6cCI6IjR0eFZVSm5ZVlRhbzRsczA2dFozRGNCdm5JVk9uY01RIn0.U3dVcaFPY5ZHlz9sntx3O2Svz_HfapBpryrUB9ipIdoIHgu_Skp40FGaLu0Fx-_Uo2GE4pfvM-XR1bQgQGyVbMhALpe2CZrKKCe9k1v4VZ_zxwhYDdV8WNr99jmbMtnm_I9rZIz3YU9dyjWlV_ktHV0bPHj1wIjBUrUc9P_EF5Vw3CeNMxlFXZ2xYldT9XdYUotJHIoJ-e_KWo0hMn_qF5xvWxD-RJIQL7G2ZxEcsmMe9JovwZoAnoqaIyutMP8g7X1UfoTGs-Fa6B1xXhtrYBms--sm_FrM5w0rjIyOuyujulPTeXO8_CbuL1Yz5kCcBsuJdXTiyTcTV9R8W0f4Rg",
  "expires_in": 86400,
  "token_type": "Bearer"
}

Run Application

Replace the variables ${AUTH0_DOMAIN}, ${AUTH0_CLIENT_ID} and ${AUTH0_CLIENT_SECRET} with your previously saved values and start the NestJS application.

$ export AUTH0_DOMAIN=${AUTH0_DOMAIN}
$ export AUTH0_CLIENT_ID=${AUTH0_CLIENT_ID}
$ export AUTH0_CLIENT_SECRET=${AUTH0_CLIENT_SECRET}
$ npm run start:dev

Make Requests without Authentication

Once the Application is running, use cURL to access the API endpoints /secret and /profile.
You will get a 401 (Unauthorized) error because both endpoints have been marked with the AuthGuard annotation and are therefore not publicly available.

$ curl http://localhost:3000/secret

$ curl http://localhost:3000/profile

Make Requests with Authentication

Now you can run the same requests but provide the access token via the Authorization header.

Because you previously authorized yourself, you can now address the two private endpoints /secret and /profile.

The /profile endpoint also returns your profile information from Auth0, which we received from the Auth0 Management API.

The Auth0 Management API uses the sub (subject) field from the JWT response to retrieve your user profile.
For documentation reasons, the JWT response in the example application is logged to the console.

$ curl http://localhost:3000/secret \
  -H 'Authorization: Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImtpZCI6Ik9EQXpOMEZHTWpBd1FVUTJORFpETXpBMVJETXdSRUUyTjBSRE5qRXpNemRFUWtNMk5URTFNUSJ9.eyJpc3MiOiJodHRwczovL25lc3Rqcy1hdXRoMC1qd3QuYXUuYXV0aDAuY29tLyIsInN1YiI6Imdvb2dsZS1vYXV0aDJ8MTEzMDc2NzYwNTUyNTQ5MTY1ODQ5IiwiYXVkIjoiaHR0cDovL2xvY2FsaG9zdDozMDAwIiwiaWF0IjoxNTY1OTg1MzU3LCJleHAiOjE1NjYwNzE3NTcsImF6cCI6IjR0eFZVSm5ZVlRhbzRsczA2dFozRGNCdm5JVk9uY01RIn0.U3dVcaFPY5ZHlz9sntx3O2Svz_HfapBpryrUB9ipIdoIHgu_Skp40FGaLu0Fx-_Uo2GE4pfvM-XR1bQgQGyVbMhALpe2CZrKKCe9k1v4VZ_zxwhYDdV8WNr99jmbMtnm_I9rZIz3YU9dyjWlV_ktHV0bPHj1wIjBUrUc9P_EF5Vw3CeNMxlFXZ2xYldT9XdYUotJHIoJ-e_KWo0hMn_qF5xvWxD-RJIQL7G2ZxEcsmMe9JovwZoAnoqaIyutMP8g7X1UfoTGs-Fa6B1xXhtrYBms--sm_FrM5w0rjIyOuyujulPTeXO8_CbuL1Yz5kCcBsuJdXTiyTcTV9R8W0f4Rg'

$ curl http://localhost:3000/profile \
  -H 'Authorization: Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImtpZCI6Ik9EQXpOMEZHTWpBd1FVUTJORFpETXpBMVJETXdSRUUyTjBSRE5qRXpNemRFUWtNMk5URTFNUSJ9.eyJpc3MiOiJodHRwczovL25lc3Rqcy1hdXRoMC1qd3QuYXUuYXV0aDAuY29tLyIsInN1YiI6Imdvb2dsZS1vYXV0aDJ8MTEzMDc2NzYwNTUyNTQ5MTY1ODQ5IiwiYXVkIjoiaHR0cDovL2xvY2FsaG9zdDozMDAwIiwiaWF0IjoxNTY1OTg1MzU3LCJleHAiOjE1NjYwNzE3NTcsImF6cCI6IjR0eFZVSm5ZVlRhbzRsczA2dFozRGNCdm5JVk9uY01RIn0.U3dVcaFPY5ZHlz9sntx3O2Svz_HfapBpryrUB9ipIdoIHgu_Skp40FGaLu0Fx-_Uo2GE4pfvM-XR1bQgQGyVbMhALpe2CZrKKCe9k1v4VZ_zxwhYDdV8WNr99jmbMtnm_I9rZIz3YU9dyjWlV_ktHV0bPHj1wIjBUrUc9P_EF5Vw3CeNMxlFXZ2xYldT9XdYUotJHIoJ-e_KWo0hMn_qF5xvWxD-RJIQL7G2ZxEcsmMe9JovwZoAnoqaIyutMP8g7X1UfoTGs-Fa6B1xXhtrYBms--sm_FrM5w0rjIyOuyujulPTeXO8_CbuL1Yz5kCcBsuJdXTiyTcTV9R8W0f4Rg'

I hope that this article will give you an idea of how you can implement an authentication provider like Auth0 in your NestJS application.

It was very cumbersome for me to get Auth0 and authentication integrated in my project, but eventually I got it working and that felt really awesome.

// Detect dark theme var iframe = document.getElementById('tweet-1162067806109732864-500'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1162067806109732864&theme=dark" }

// Detect dark theme var iframe = document.getElementById('tweet-1162068298395258880-372'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1162068298395258880&theme=dark" }

Matthias 🤖 • Aug 17 '19

I was not able to get Auth0 authentication working in my NestJS project. I also asked for help here:

Using JWT-Authentication (Auth0) with NestJS 🔐

Matthias 🤖 ・ Aug 14 ・ 1 min read

#help #webdev #security

I was struggling with this problem for a few days, I then took a break and didn't touch my code for a day or so.
I started again with a clean mind and could solve problem within an hour 🥳.

That's why I love programming, you always have this great moments when you achieved something 💪
And normally you have this little breakthroughs every few hours or days (depending on the size of your projects). For me, that's the most motivating thing in my job!

BTW: I'm writing an article on how I solved it 😉.

I also think that the NestJS documentation on Authentication could be improved to make it easier for people to implement it right and avoid security breaches. However, I don't complain, NestJS is open source and everyone could improve the documentation.

If you have any questions about NestJS, Auth0 or another topic, don't hesitate to write me a DM on Twitter, dev.to or write me a mail: yo@fullstack.to. I'm happy to help you!

Links

If you like my content, you might want to follow me on Twitter?! @fullstack_to

Cover Image by Jason Blackeye on Unsplash

Using JWT-Authentication (Auth0) with NestJS 🔐

Matthias 🤖 — Wed, 14 Aug 2019 14:21:37 +0000

I'm trying to secure my NestJS based API with Auth0.

It doesn't feel right what I'm doing at this moment 🥴.

I tried to use the NestJS documentation and also the Developing Backend APIs with Nest.js from Auth0 but I don't know what I'm doing.

Did anyone of you solved this problem already?
Can you provide some good resources or advice?

Here is my strategy implementation:

import { passportJwtSecret } from 'jwks-rsa';
import { ExtractJwt, Strategy, VerifiedCallback } from 'passport-jwt';

import { Injectable, UnauthorizedException } from '@nestjs/common';
import { PassportStrategy } from '@nestjs/passport';

@Injectable()
export class JwtStrategy extends PassportStrategy(Strategy) {
  constructor() {
    super({
      secretOrKeyProvider: passportJwtSecret({
        cache: true,
        rateLimit: true,
        jwksRequestsPerMinute: 5,
        jwksUri: '${DOMAIN}/.well-known/jwks.json'
      }),
      jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken(),
      audience: 'http://localhost:3000',
      issuer: '${DOMAIN}'
    });
  }

  async validate(payload: any, done: VerifiedCallback) {
    if (!payload) {
      done(new UnauthorizedException(), false);
    }

    return done(null, payload);
  }
}

In the controller I use an AuthGuard:

@UseGuards(AuthGuard('jwt'))

I also want to retrieve the authenticated user's metadata from Auth0. Did anyone figure out how to do that?

Do you use Udemy? Which courses are you enrolled in?

Matthias 🤖 — Tue, 13 Aug 2019 06:08:35 +0000

Do you use Udemy to learn new technologies, programming languages or other skills?

How you do get the most out of your course?
Which courses are you enrolled in?

I bought the following courses:

If you want to learn Docker I can absolutely recommend the Docker Mastery course by Bret Fisher 👍

Fortunately, Udemy has many offerings, so that you can often buy courses for little money 🤑.

Milestones / Reflecting things

Matthias 🤖 — Tue, 06 Aug 2019 06:27:49 +0000

Sometimes it is quite nice to reflect on what you have already achieved in life. Here, I only focus on tech things that I've learned since I started software development 20 years ago.

There were also some technologies or programming languages which I started to learn but abandoned at some point. I marked them with this emoji: 🏚.

20 years ago

QBasic 🏚
I found a QBasic IDE on some computer games magazine's disk. I was immediately caught and wanted to learn more about programming. I started by printing out source code and read it. A few weeks later I started by coding a simple quiz application.

19 years ago

Visual Basic 6 🏚
As my parents realized that I really like computer programming, they bought me a book like Visual Basic for Kids. I spent every minute learning Visual Basic. Eventually, I wrote an application that split large files into smaller chunks (floppy disk were still a thing in 2000), which was featured in a computer magazine 🥳

17 years ago

Blitz BASIC, HTML and CSS
Because I already was familiar with the BASIC dialect, I looked for a way to write computer games, so I discovered Blitz BASIC. It was easy for me to write simple 2d graphic games. A benefit of learning Blitz BASIC was, that there was a very active and helpful community in Germany.

15 years ago

PHP, MySQL and JavaScript 🏚
I launched my first website fifteen years ago (a platform where anyone could upload replays of Pro Evolution Soccer 3)

14 years ago

Linux and server administration
I ordered my first virtual server to install a Counter-Strike game server and an IRC bouncer.

13 years ago

Network administration, Active Directory
I began an apprenticeship as IT administrator in late 2006. No coding was involved, I didn't really like that job, but it taught me many computer science basic which are still helpful.

10 years ago

Java, JavaScript, PHP, MySQL, MSSQL, C++, C#, Assembler
Sounds like I learned a lot in this year. I started studying computer science after I finished my apprenticeship. It was very practical and I learned many programming languages and database systems.

7 years ago

Java, Java EE, Spring Framework, Apache Tomcat, JBoss
I landed my first job as software engineer in 2012 🥳. Everything I learned so far was nice and came helpful, but when you start working, you realize that you know nothing.

6 years ago

AngularJS 🏚, jQuery 🏚, REST APIs
Only backend coding make me go crazy. I wanted to learn some technologies where I actually was able to show what I've done. I started learning AngularJS with an online course from CodeSchool.

5 years ago

Node.js, Docker 🐳
My first contact with DevOps technologies, more precisely Docker.

4 years ago

Jenkins, REST APIs, Swift 🏚, Android 🏚
I started working for a new company where I developed the backend system for a mobile application. Because I wanted to have some basic knowledge of the apps, I started to learn Swift and Android.

3 years ago

Docker 🐳
Docker again, but this time a little more specific.

2 years ago

TypeScript, Angular
I have again changed to a new employer.
This time I learned TypeScript and because I am doing more full stack work, I also had to learn Angular.

1 year ago

Kubernetes, React
When Docker Cloud was shut down last year, we were looking for a new way to host our services, we decided to go with Kubernetes. I don't regret this choice so far.
I also did some more front end development, React ⚛️ has replaced Angular a bit.

0.5 years ago

GatsbyJS ❤️, Headless CMS, JAMstack
I built some websites for friends and local businesses. In my opinion static site generators and headless content management systems are the state-of-the-art nowadays.

If you like my content, you might want to follow me on Twitter?! @fullstack_to

Cover Image by Ian Schneider on Unsplash

What's your favorite sports team?

Matthias 🤖 — Tue, 30 Jul 2019 06:18:09 +0000

Soccer ⚽️ is the major sports in Germany. I am also a big fan and regularly visit home and away matches of my favorite team Hannover 96. They currently play in the second division. I own a season ticket (which does not cost more than 170 USD) so I can visit all home matches if I want to.

I also watch American Football 🏈 lately. American Football gets a lot of screen time in German TV lately, however I am not that much into the rules and tactics. My favorite teams in Football are the 49ers (I traveled to San Francisco a few times and I really like the city) and the Dallas Cowboys.

What are your favorite sports teams?