A road to the easiest user authentication system for Node.js

JavaScript is easy to read and write, but sometimes we are facing difficulties like user authentication.

Before talking about user authentication deeper, let me introduce you what I made this weekend:

saltyshiomix / ark

An easiest authentication system on top of NestJS, TypeORM, NEXT.js(v9.3) and Material UI(v4).

An easiest authentication system on top of NestJS, TypeORM, NEXT.js (v9) and Material UI (v4).

Features

• Cross platform - Mac, Linux and Windows
• Database synchronization with entities - powered by TypeORM
• Server Side Rendering - powered by NEXT.js
• API server - powered by NestJS
• Authentication - powered by Passport
• Material UI design

Technologies

• Hot reloading for the developer experience :)
  • ts-node-dev - Compiles your TS app and restarts when files are modified
  • NEXT.js - The React Framework
• Lang
  • TypeScript - Javascript that scales
• Database
  • PostgreSQL - The World's Most Advanced Open Source Relational Database
• ORM (Object-relational mapping)
  • TypeORM - ORM for TypeScript and JavaScript (ES7, ES6, ES5)
• Server
  • NestJS - A progressive Node.js framework for building efficient, reliable and scalable server-side applications
    • internally using Express - Fast, unopinionated, minimalist web framework for Node.js
  • NEXT.js - The React Framework
• Environment variables
  • dotenv - Loads environment variables from .env…

View on GitHub

Yes, this is a super duper simple user authentication system :)

On the other hand, it uses these technologies:

• Hot reloading for the developer experience :)
  • nodemon - Monitor for any changes in your node.js application and automatically restart the server
  • Next.js - The React Framework
• Lang
  • TypeScript - Javascript that scales
• Database
  • PostgreSQL - The World's Most Advanced Open Source Relational Database
• ORM (Object-relational mapping)
  • TypeORM - ORM for TypeScript and JavaScript (ES7, ES6, ES5)
• Server
  • nest - A progressive Node.js framework for building efficient, reliable and scalable server-side applications
    • internally using Express - Fast, unopinionated, minimalist web framework for Node.js
  • Next.js - The React Framework
• Environment variables
  • dotenv - Loads environment variables from .env for nodejs projects
• User authentication
  • Passport - Simple, unobtrusive authentication for Node.js
• UI framework
  • React - A JavaScript library for building user interfaces
  • Next.js - The React Framework
  • Material UI - React components that implement Google's Material Design.

So many libraries, right? Easiest authentication?

Yes.

Let's digging deeper:

Fun Database

Thanks to TypeORM, we can synchronize database with entities.

Here is a user.entity.ts:

import {
  Entity,
  Column,
  PrimaryGeneratedColumn
} from 'typeorm';

@Entity()
export class User {
  @PrimaryGeneratedColumn()
  id: number;

  @Column('varchar')
  name: string;

  @Column('varchar', {
    unique: true
  })
  email: string;

  @Column('varchar')
  password: string;  
}

TypeORM automatically synchronize database from @Entity() decorator information.
In other words, database automatically changes as soon as you save user.entity.ts.

Fun Coding

With nest, we can use modern JavaScript(TypeScript), and with VSCode we can obtain the maximum benefit like code intelligence.

Here is a sample users.controller.ts:

import {
  Controller,
  Get
} from '@nestjs/common';
import { User } from './user.entity';
import { UsersService } from './users.service';

@Controller('api/users')
export class UsersController {
  constructor(private readonly service: UsersService) {}

  @Get()
  async findAll(@Query() query): Promise<User[]> {
    return await this.service.findAll();
  }
}

By constructor injection, users.controller.ts doesn't care about how to findAll() users.

And users.service.ts is like this:

import { Injectable } from '@nestjs/common';
import { InjectRepository } from '@nestjs/typeorm';
import { Repository } from 'typeorm';
import { User } from './user.entity';

@Injectable()
export class UsersService {
  constructor(@InjectRepository(User) private readonly repository: Repository<User>) {}

  async findAll(): Promise<User[]> {
    return await this.repository.find();
  }
}

Can you believe this?

We can findAll() users without coding SQL scripts because TypeORM and nest conceal implementation. (so called "Repository Pattern")

Fun SEO (Server Side Rendering)

Next.js enables us to write page/index.tsx without caring about server side rendering:

export default () => 'Hello SSR!'; // this is a React.Component :)

How to try ARK

First, you need to install PostgreSQL.

If you use Mac and Homebrew, setup is so easy:

# install database (postgresql)
$ brew install postgresql

# if you want to start postgresql in startup, try do this
$ brew services start postgresql

# create user "arkuser" with password "arkark"
$ createuser -P arkuser

# create database "arkdb" owened by "arkuser"
$ createdb arkdb -O arkuser

That's it!

And use it like Next.js:

# clone repository
$ git clone https://github.com/saltyshiomix/ark.git

# install dependencies
$ cd ark
$ yarn

# development mode
# please make sure to create the `.env` file!
$ yarn dev

# production mode
# please make sure to create the `.next/.env` file!
$ yarn build
$ yarn start

(.env file is like this:)

# DB
DB_TYPE=postgres
DB_HOST=localhost
DB_PORT=5432
DB_USERNAME=arkuser
DB_PASSWORD=arkark
DB_DATABASE=arkdb
DB_SYNCHRONIZE=true

# App
HOST=localhost
PORT=4000
SESSION_SECRET=ark

And you'll see http://localhost:4000:

And create an account:

You are now logged in!

Conclusion

I created ARK repository for the purpose of showing how to implement user authentication system easily.

So PRs are welcome!
(like "Implement social login", "Implement JSON API" and so on.)

I hope you helped :)