GithubHelp home page GithubHelp logo

rachhen / auth Goto Github PK

View Code? Open in Web Editor NEW

This project forked from flolu/auth

1.0 0.0 0.0 1.03 MB

Refresh/Access Token Authentication Demo with Client Side Rendering, Server Side Rendering and Websockets

Home Page: https://youtu.be/xMsJPnjiRAc

Makefile 6.49% JavaScript 0.91% TypeScript 45.00% HCL 44.67% Dockerfile 2.92%

auth's Introduction


Fullstack Authentication

Access/Refresh Token Authentication Demo with Node.js And Typescript

Watch the YouTube Tutorial

Stack

Backend: Node.js, Typescript, MongoDB, Kubernetes

Frontend: Next.js, Typescript

DevOps: Docker, Terraform, Kubernetes, Google Cloud

Usage

Recommended OS: Ubuntu 20.04 LTS

Requirements: Docker, Docker Compose, Yarn, Node.js

Optional: Terraform, Google Cloud SDK

Setup

  • make setup
  • Create GitHub OAuth app here
    • Set "Homepage URL" to http://localhost:3000
    • Set "Authorization callback URL" to http://localhost:3000/github
    • Set GITHUB_CLIENT_ID in .env.development
    • Set NEXT_PUBLIC_GITHUB_CLIENT_ID in client/.env.development
    • "Generate a new client secret"
    • Set GITHUB_CLIENT_SECRET in .env.development

Development

  • make client (Start Next.js development server, http://localhost:3000)
  • make backend (Start development backend services)

Codebase

Services

  • client Next.js client (web application)
  • api Node.js server (http api)
  • realtime Node.js server (websocket server)
  • shared Typescript lib (shared code)
  • infrastructure Terraform (configurations to deploy application in the cloud)

Deployment

Commands

  • make init-infrastructure (Initialize Terraform)
  • make apply (Apply cloud resources, ~15 minutes)
  • make deploy (Build and deploy services to Kubernetes cluster)
  • make destroy (Destroy cloud resources)
  • make client-image (Build and push client Docker image)
  • make api-image (Build and push api Docker image)
  • make realtime-image (Build and push Docker image)

Step by step guide

  1. Configure variables in Makefile
    • GCP_PROJECT You can create a project here
    • TF_BUCKET Choose a unique bucket name for Terraform state
    • EMAIL Only used for generating SSL certificates
    • GKE_ZONE Choose a region or zone from this list for your Kubernetes cluster
    • DOMAIN
  2. Sign into your project gcloud auth application-default login
  3. Create the bucket for storing Terraform state (make create-terraform-bucket)
  4. Set terraform.backend.bucket in infrastructure/main.tf to TF_BUCKET
  5. Insert secrets into Google Cloud Secret Manager
    • GitHub OAuth (create here)
      • Set "Authorization callback URL" to https://api.${DOMAIN}/github
      • github_client_id
      • github_client_secret
    • Secrets (generate here)
      • refresh_token_secret
      • access_token_secret
    • MongoDB Atlas (create a free cluster here)
      • Navigate to Project Settings -> Access Manager -> API Keys -> Create API Key -> Select Project Owner
      • mongodbatlas_public_key
      • mongodbatlas_private_key
      • atlas_project_id (found under Settings)
  6. Add 0.0.0.0/0 to your MongoDB Atlas project "IP Access List" (Under Network Access)
  7. Enable Container Registry in your GCP console
  8. make init-infrastructure
  9. make deploy
  10. Go to Google Cloud DNS, main-zone, copy the NS record to your domain registrar
  11. Uncomment code block in infrastructure/modules/kubernetes-cert-manager/main.tf and run make apply
  12. The app should be live at https://${DOMAIN}
  • Every time you want to deploy changes, just run make deploy

Credits

Icons made by Smashicons from www.flaticon.com

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.