DEV Community: Markus Häcker

OAuth2 in NestJS for Social Login with GitHub (and Google, Facebook, …)

Markus Häcker — Thu, 10 Feb 2022 05:40:18 +0000

This sample NestJS app is one of the kind you get with nest new, but with the addition of Passport to

authenticate a user by identity token issued from GitHub as an Identity Provider,
manage authenticated state (by issuing a JSON Web Token, JWT),
attach information about the authenticated user to the Request object for further use in route handlers.

It is easy to add another strategy or replace GitHub with Google or Facebook for instance.

The code has many comments that make everything very clear and understandable.

Run

First you have to register a new OAuth application in GitHub:

Then copy file .env.sample and name it .env. Open .env and fill the values of GITHUB_OAUTH_CLIENT_ID and GITHUB_OAUTH_CLIENT_SECRET according to the application just created in GitHub. Also set an arbitrary value for JWT_SECRET.

Then you can start the app with

$ npm run dev

In your browser, open http://localhost:5000 or http://localhost:5000/profile. You will get HTTP status 401 "Unauthorized" because these are protected routes that are accessible only to requests that contain a valid JWT.

So open http://localhost:5000/auth/github. This route allows users to authenticate via GitHub, returning a JWT for use in subsequent calls to protected API endpoints. The JWT is included in the response body and as a cookie named jwt. Because of the cookie, you are now able to visit http://localhost:5000 and http://localhost:5000/profile.

Protection is realized by annotating the routes with @UseGuards(JwtAuthGuard): When such a route is hit, the Guard will automatically invoke our passport-jwt custom configured logic, validating the JWT, and assigning the user property to the Request object. Clients can send the JWT either

as a bearer token in an authorization header ("Authorization: Bearer eyJhbGciO…") or
in a cookie (name "jwt", its value is the token).

Use Airbnb's ESLint Config with TypeScript & Prettier in Svelte Apps

Markus Häcker — Fri, 10 Apr 2020 14:31:51 +0000

First install the necessary dependencies:

npm i @typescript-eslint/eslint-plugin \
    @typescript-eslint/parser \
    eslint \
    eslint-config-airbnb-typescript \
    eslint-config-prettier \ 
    eslint-plugin-eslint-comments \ 
    eslint-plugin-import \ 
    eslint-plugin-promise \ 
    eslint-plugin-svelte3 \ 
    prettier \ 
    --save-dev

Then create 3 files in your app's root folder:

1st file: .eslintrc.js:

module.exports = {
  root: true,
  parser: "@typescript-eslint/parser",
  parserOptions: {
    tsconfigRootDir: __dirname,
    project: ["./tsconfig.json"],
  },
  rules: {
    "import/no-extraneous-dependencies": ["error", { devDependencies: true }],
    "import/no-mutable-exports": 0,
    "no-labels": 0,
    "no-restricted-syntax": 0,
  },
  plugins: ["@typescript-eslint", "svelte3"],
  extends: [
    "airbnb-typescript",
    "plugin:@typescript-eslint/recommended",
    "plugin:eslint-comments/recommended",
    "plugin:promise/recommended",
    "prettier",
    "prettier/@typescript-eslint",
  ],
  overrides: [
    {
      files: ["**/*.svelte"],
      processor: "svelte3/svelte3",
    },
  ],
};

2nd file: .prettierrc - sample content:

{
  "singleQuote": true,
  "trailingComma": "all",
  "useTabs": true,
  "tabWidth": 4,
  "printWidth": 100,
  "overrides": [
    {
      "files": "*.ts",
      "options": {
        "parser": "typescript"
      }
    }
  ]
}

3rd file: .eslintignore:

node_modules

That's all 🤓

Use TypeScript with Svelte / Sapper

Markus Häcker — Mon, 23 Mar 2020 19:35:38 +0000

EDIT 2020-07-24: Svelte now officially supports TypeScript

It only takes a few steps to use TypeScript in your .svelte files within <script lang="typescript">...</script> blocks.

The following example shows you how to create a new project based on the default Sapper template and add support for TypeScript. Of course, the steps can also be adopted for projects that are not based on the template or for existing projects.

# Clone the repo and install dependencies, see https://sapper.svelte.dev/docs/#Getting_started
npx degit "sveltejs/sapper-template#rollup" sapper-with-ts-sample
npm i

To do a little testing, add the following to the top of src/routes/index.svelte:

<script lang="typescript">
    export let title: "string = \"Hello TypeScript\";"
    // VS Code will show you an "Unexpected token" error; this is okay at this point
</script>

Replace

<title>Sapper project template</title>

with

<title>{title}</title>

Then install:

npm i svelte-preprocess typescript --save-dev

Create a new file svelte.config.js in the root folder with the following content:

// See https://github.com/kaisermann/svelte-preprocess#with-svelte-vs-code
const sveltePreprocess = require('svelte-preprocess');

module.exports = {
    preprocess: sveltePreprocess({
        // ...svelte-preprocess options (optional)
    }),
    // ...other svelte options (optional)
};

Also create the TypeScript config file tsconfig.json in the root folder and copy and paste (and adapt it as you need it):

{
    "include": ["src/**/*"],
    "exclude": ["node_modules/*"],
    "compilerOptions": {
        "target": "es2015",
        "module": "es2015",
        "types": ["svelte"]
    }
}

Edit rollup.config.js and make 3 insertions:

// ...
import autoPreprocess from "svelte-preprocess"; // add this

export default {
    client: {
        plugins: [
            svelte({
                preprocess: autoPreprocess(), // add this

    // ...

    server: {
        plugins: [
            svelte({
                preprocess: autoPreprocess(), // add this
                // ...
            }),
    // ...

Restart VS Code (or which IDE you use). The "Unexpected token" error in your src/routes/index.svelte should have disappeared.

Run

npm run dev

Visit http://localhost:3000 in your browser.
Change the value of your title variable in src/routes/index.svelte to sth. else, save your file and test live reloading in your browser.

Maybe you already got everything you wanted. If you want to replace your client.js/server.js with its TypeScript counterpart, here are the next steps:

Install two more dependencies:

npm i rollup-plugin-typescript2 @types/node --save-dev

Adapt your rollup.config.js (3 inserted lines, 2 edited):

// ...
import typescript from "rollup-plugin-typescript2"; // add

export default {
    client: {
        input: config.client.input().replace(/\.js$/, ".ts"), // edit here
        output: config.client.output(),
        plugins: [
            // ...
            commonjs(),
            typescript(), // add after commonjs()
    // ...
    server: {
        input: config.server.input().server.replace(/\.js$/, ".ts"), // edit here
        output: config.server.output(),
        plugins: [
            // ...
            commonjs(),
            typescript(), // add after commonjs()
        // ...

Edit your tsconfig.json:

...
"types": ["svelte", "node", "@sapper"], // add the last two to the existing types
"typeRoots": ["typings"] // add line
...

Create a new directory /typings/@sapper in the root folder and in @sapper create a file index.d.ts. Paste:

declare module '@sapper/app';
declare module '@sapper/server';
declare module '@sapper/service-worker';

Finally change the file suffix of the files client.js and server.js in the /src folder from .js to .ts. That's it, happy TypeScripting :)