Implementing Authentication with Twitter Oauth 2.0 using Typescript, Node js, Express js and Next js in a Full Stack Application

{  "private": true,  "workspaces": [    "server",    "client"  ],  "scripts": {    "client:dev": "yarn workspace client dev",    "server:dev": "yarn workspace server dev",    "client:add": "yarn workspace client add",    "server:add": "yarn workspace server add",    "migrate-db": "yarn workspace server prisma-migrate"  }}

yarn create next-app --typescript client

import { NextPage } from "next";const Home: NextPage = () => {  return (    <div className="column-container">      <p>Hello!</p>    </div>  );};export default Home;

{  "name": "server",  "version": "1.0.0",  "scripts": {    "start": "node dist/index.js",    "build": "tsc --sourceMap false",    "build:watch": "tsc -w",    "start:watch": "nodemon dist/index.js",    "dev": "concurrently \"yarn build:watch\" \"yarn start:watch\" --names \"tsc,node\" -c \"blue,green\"",    "prisma-migrate": "prisma migrate dev",    "prisma-gen": "prisma generate"  }}

yarn server:add @prisma/client argon2 axios cookie-parser cors dotenv express jsonwebtoken

yarn server:add -D nodemon prisma typescript concurrently @types/cookie-parser @types/cors @types/express @types/jsonwebtoken @types/node

  {    "compilerOptions": {      "target": "ES2018",      "module": "commonjs",      "lib": [        "esnext", "esnext.asynciterable"      ],      "strict": true,      "skipLibCheck": true,      "sourceMap": true,      "declaration": true,      "moduleResolution": "node",      "noImplicitAny": true,      "strictNullChecks": true,      "strictFunctionTypes": true,      "noImplicitThis": true,      "noUnusedLocals": true,      "noUnusedParameters": true,      "noImplicitReturns": true,      "noFallthroughCasesInSwitch": true,      "allowSyntheticDefaultImports": true,      "esModuleInterop": true,      "emitDecoratorMetadata": true,      "experimentalDecorators": true,      "resolveJsonModule": true,      "incremental": false,      "baseUrl": "./src",      "watch": false,      "removeComments": true,      "outDir": "./dist",      "rootDir": "./src"    },    "types": ["node"],    "include": ["./src/**/*.ts"],  }

  import { CLIENT_URL, SERVER_PORT } from "./config";  import cookieParser from "cookie-parser";  import cors from "cors";  import express from "express";  const app = express();  const origin = [CLIENT_URL];  app.use(cookieParser());  app.use(cors({    origin,    credentials: true  }))  app.get("/ping", (_, res) => res.json("pong"));  app.listen(SERVER_PORT, () => console.log(`Server listening on port ${SERVER_PORT}`))

  import { PrismaClient } from "@prisma/client"  export const CLIENT_URL = process.env.CLIENT_URL!  export const SERVER_PORT = process.env.SERVER_PORT!  export const prisma = new PrismaClient()

  DATABASE_URL=postgres://postgres:postgres@localhost:5432/twitter-oauth2  CLIENT_URL=http://www.localhost:3000  SERVER_PORT=3001

  generator client {    provider = "prisma-client-js"  }  datasource db {    provider = "postgresql"    url      = env("DATABASE_URL")  }  enum UserType {    local    twitter  }  model User {    id       String   @id @default(uuid())    name     String    username String   @unique    type     UserType @default(local)  }

import twitterIcon from "../public/twitter.svg";import Image from "next/image";const TWITTER_CLIENT_ID = "T1dLaHdFSWVfTnEtQ2psZThTbnI6MTpjaQ" // give your twitter client id here// twitter oauth Url constructorfunction getTwitterOauthUrl() {  const rootUrl = "https://twitter.com/i/oauth2/authorize";  const options = {    redirect_uri: "http://www.localhost:3001/oauth/twitter", // client url cannot be http://localhost:3000/ or http://127.0.0.1:3000/    client_id: TWITTER_CLIENT_ID,    state: "state",    response_type: "code",    code_challenge: "challenge",    code_challenge_method: "plain",    scope: ["users.read", "tweet.read", "follows.read", "follows.write"].join(" "), // add/remove scopes as needed  };  const qs = new URLSearchParams(options).toString();  return `${rootUrl}?${qs}`;}// the componentexport function TwitterOauthButton() {  return (    <a className="a-button row-container" href={getTwitterOauthUrl()}>      <Image src={twitterIcon} alt="twitter icon" />      <p>{" twitter"}</p>    </a>  );}

import { TwitterOauthButton } from "../components/TwitterOauthButton";const Home: NextPage = () => {  return (    <div className="column-container">      <p>Hello!</p>      <TwitterOauthButton />    </div>  );};

import { useEffect, useState } from "react";import axios, { AxiosResponse } from "axios";export type User = {  id: string;  name: string;  username: string;  type: "local" | "twitter";};export function useMeQuery() {  const [error, setError] = useState<string | null>(null);  const [loading, setLoading] = useState<boolean>(true);  const [data, setData] = useState<User | null>(null);  useEffect(() => {    setLoading(true);    axios      .get<any, AxiosResponse<User>>(`http://www.localhost:3001/me`, {        withCredentials: true,      })      .then((v) => {        if (v.data) setData(v.data);      })      .catch(() => setError("Not Authenticated"))      .finally(() => setLoading(false));  }, []);  return { error, data, loading };}

import type { NextPage } from "next";import { TwitterOauthButton } from "../components/TwitterOauthButton";import { useMeQuery } from "../hooks/useMeQuery";const Home: NextPage = () => {  const { data: user } = useMeQuery();  return (    <div className="column-container">      <p>Hello!</p>      {user ? (// user present so only display user's name        <p>{user.name}</p>      ) : (// user not present so prompt to login        <div>          <p>You are not Logged in! Login with:</p>          <TwitterOauthButton />        </div>      )}    </div>  );};export default Home;

html,body {  padding: 0;  margin: 0;  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;}a {  color: inherit;  text-decoration: none;}.column-container {  display: flex;  flex-direction: column;  justify-content: center;  align-items: center;}.row-container {  display: flex;  flex-direction: row;  justify-content: center;  align-items: center;}.a-button {  border: 2px solid grey;  border-radius: 5px;}.a-button:hover {  background-color: #111133;}@media (prefers-color-scheme: dark) {  html {    color-scheme: dark;  }  body {    color: white;    background: black;  }}

// the function which will be called when twitter redirects to the server at http://www.localhost:3001/oauth/twitterexport async function twitterOauth(req: Request<any, any, any, {code:string}>, res: Response) {  const code = req.query.code; // getting the code if the user authorized the app  // 1. get the access token with the code  // 2. get the twitter user using the access token  // 3. upsert the user in our db  // 4. create cookie so that the server can validate the user  // 5. finally redirect to the client  return res.redirect(CLIENT_URL);}

DATABASE_URL=postgres://postgres:postgres@localhost:5432/twitter-oauth2CLIENT_URL=http://www.localhost:3000SERVER_PORT=3001JWT_SECRET=put-your-jwt-secret-hereTWITTER_CLIENT_SECRET=put-your-twitter-client-secret-here

// add your client id and secret here:const TWITTER_OAUTH_CLIENT_ID = "T1dLaHdFSWVfTnEtQ2psZThTbnI6MTpjaQ";const TWITTER_OAUTH_CLIENT_SECRET = process.env.TWITTER_CLIENT_SECRET!;// the url where we get the twitter access token fromconst TWITTER_OAUTH_TOKEN_URL = "https://api.twitter.com/2/oauth2/token";// we need to encrypt our twitter client id and secret here in base 64 (stated in twitter documentation)const BasicAuthToken = Buffer.from(`${TWITTER_OAUTH_CLIENT_ID}:${TWITTER_OAUTH_CLIENT_SECRET}`, "utf8").toString(  "base64");// filling up the query parameters needed to request for getting the tokenexport const twitterOauthTokenParams = {  client_id: TWITTER_OAUTH_CLIENT_ID,  code_verifier: "challenge",  redirect_uri: `http://www.localhost:3001/oauth/twitter`,  grant_type: "authorization_code",};// the shape of the object we should recieve from twitter in the requesttype TwitterTokenResponse = {  token_type: "bearer";  expires_in: 7200;  access_token: string;  scope: string;};// the main step 1 function, getting the access token from twitter using the code that twitter sent usexport async function getTwitterOAuthToken(code: string) {  try {    // POST request to the token url to get the access token    const res = await axios.post<TwitterTokenResponse>(      TWITTER_OAUTH_TOKEN_URL,      new URLSearchParams({ ...twitterOauthTokenParams, code }).toString(),      {        headers: {          "Content-Type": "application/x-www-form-urlencoded",          Authorization: `Basic ${BasicAuthToken}`,        },      }    );    return res.data;  } catch (err) {    console.error(err);    return null;  }}

// the shape of the response we should getexport interface TwitterUser {  id: string;  name: string;  username: string;}// getting the twitter user from access tokenexport async function getTwitterUser(accessToken: string): Promise<TwitterUser | null> {  try {    // request GET https://api.twitter.com/2/users/me    const res = await axios.get<{ data: TwitterUser }>("https://api.twitter.com/2/users/me", {      headers: {        "Content-type": "application/json",        // put the access token in the Authorization Bearer token        Authorization: `Bearer ${accessToken}`,      },    });    return res.data.data ?? null;  } catch (err) {    console.error(err);    return null;  }}

import { CLIENT_URL } from "./config";import axios from "axios";import { Request, Response } from "express";// add your client id and secret here:const TWITTER_OAUTH_CLIENT_ID = "T1dLaHdFSWVfTnEtQ2psZThTbnI6MTpjaQ";const TWITTER_OAUTH_CLIENT_SECRET = process.env.TWITTER_CLIENT_SECRET!;// the url where we get the twitter access token fromconst TWITTER_OAUTH_TOKEN_URL = "https://api.twitter.com/2/oauth2/token";// we need to encrypt our twitter client id and secret here in base 64 (stated in twitter documentation)const BasicAuthToken = Buffer.from(`${TWITTER_OAUTH_CLIENT_ID}:${TWITTER_OAUTH_CLIENT_SECRET}`, "utf8").toString(  "base64");// filling up the query parameters needed to request for getting the tokenexport const twitterOauthTokenParams = {  client_id: TWITTER_OAUTH_CLIENT_ID,  code_verifier: "challenge",  redirect_uri: `http://www.localhost:3001/oauth/twitter`,  grant_type: "authorization_code",};// the shape of the object we should recieve from twitter in the requesttype TwitterTokenResponse = {  token_type: "bearer";  expires_in: 7200;  access_token: string;  scope: string;};// the main step 1 function, getting the access token from twitter using the code that the twitter sent usexport async function getTwitterOAuthToken(code: string) {  try {    // POST request to the token url to get the access token    const res = await axios.post<TwitterTokenResponse>(      TWITTER_OAUTH_TOKEN_URL,      new URLSearchParams({ ...twitterOauthTokenParams, code }).toString(),      {        headers: {          "Content-Type": "application/x-www-form-urlencoded",          Authorization: `Basic ${BasicAuthToken}`,        },      }    );    return res.data;  } catch (err) {    console.error(err);    return null;  }}// the shape of the response we should getexport interface TwitterUser {  id: string;  name: string;  username: string;}// getting the twitter user from access tokenexport async function getTwitterUser(accessToken: string): Promise<TwitterUser | null> {  try {    // request GET https://api.twitter.com/2/users/me    const res = await axios.get<{ data: TwitterUser }>("https://api.twitter.com/2/users/me", {      headers: {        "Content-type": "application/json",        // put the access token in the Authorization Bearer token        Authorization: `Bearer ${accessToken}`,      },    });    return res.data.data ?? null;  } catch (err) {    console.error(err);    return null;  }}// the function which will be called when twitter redirects to the server at http://www.localhost:3001/oauth/twitterexport async function twitterOauth(req: Request<any, any, any, {code:string}>, res: Response) {  const code = req.query.code;  // 1. get the access token with the code  const TwitterOAuthToken = await getTwitterOAuthToken(code);  console.log(TwitterOAuthToken);  if (!TwitterOAuthToken) {    // redirect if no auth token    return res.redirect(CLIENT_URL);  }  // 2. get the twitter user using the access token  const twitterUser = await getTwitterUser(TwitterOAuthToken.access_token);  console.log(twitterUser);  if (!twitterUser) {    // redirect if no twitter user    return res.redirect(CLIENT_URL);  }  // 3. upsert the user in our db  // 4. create cookie so that the server can validate the user  // 5. finally redirect to the client  return res.redirect(CLIENT_URL);}

app.get("/ping", (_, res) => res.json("pong"));// activate twitterOauth function when visiting the route app.get("/oauth/twitter", twitterOauth);app.listen(SERVER_PORT, () => console.log(`Server listening on port ${SERVER_PORT}`))

import { PrismaClient, User } from "@prisma/client"import { CookieOptions, Response } from "express";import { TwitterUser } from "./oauth2";import jwt from "jsonwebtoken";export const CLIENT_URL = process.env.CLIENT_URL!export const SERVER_PORT = process.env.SERVER_PORT!export const prisma = new PrismaClient()// step 3export function upsertUser(twitterUser: TwitterUser) {  // create a new user in our database or return an old user who already signed up earlier   return prisma.user.upsert({    create: {      username: twitterUser.username,      id: twitterUser.id,      name: twitterUser.name,      type: "twitter",    },    update: {      id: twitterUser.id,    },    where: {  id: twitterUser.id},  });}// JWT_SECRET from our environment variable fileexport const JWT_SECRET = process.env.JWT_SECRET!// cookie nameexport const COOKIE_NAME = 'oauth2_token'// cookie setting optionsconst cookieOptions: CookieOptions = {  httpOnly: true,  sameSite: "strict"}// step 4export function addCookieToRes(res: Response, user: User, accessToken: string) {  const { id, type } = user;  const token = jwt.sign({ // Signing the token to send to client side    id,    accessToken,    type  }, JWT_SECRET);  res.cookie(COOKIE_NAME, token, {  // adding the cookie to response here    ...cookieOptions,    expires: new Date(Date.now() + 7200 * 1000),  });}

import { prisma, CLIENT_URL, addResCookie } from "./config";...// the function which will be called when twitter redirects to the server at http://www.localhost:3001/oauth/twitterexport async function twitterOauth(req: Request<any, any, any, {code:string}>, res: Response) {  const code = req.query.code;  // 1. get the access token with the code  const twitterOAuthToken = await getTwitterOAuthToken(code);  console.log(twitterOAuthToken);  if (!twitterOAuthToken) {    // redirect if no auth token    return res.redirect(CLIENT_URL);  }  // 2. get the twitter user using the access token  const twitterUser = await getTwitterUser(twitterOAuthToken.access_token);  console.log(twitterUser);  if (!twitterUser) {    // redirect if no twitter user    return res.redirect(CLIENT_URL);  }  // 3. upsert the user in our db  const user = await upsertUser(twitterUser)  // 4. create cookie so that the server can validate the user  addCookieToRes(res, user, twitterOAuthToken.access_token)  // 5. finally redirect to the client  return res.redirect(CLIENT_URL);}

import { CLIENT_URL, COOKIE_NAME, JWT_SECRET, prisma, SERVER_PORT } from "./config";import cookieParser from "cookie-parser";import cors from "cors";import express from "express";import jwt from 'jsonwebtoken'import { getTwitterUser, twitterOauth } from "./oauth2";import { User } from "@prisma/client";const app = express();const origin= [CLIENT_URL];app.use(cookieParser());app.use(cors({  origin,  credentials: true}))app.get("/ping", (_, res) => res.json("pong"));type UserJWTPayload = Pick<User, 'id'|'type'> & {accessToken: string}app.get('/me', async (req, res)=>{  try {    const token = req.cookies[COOKIE_NAME];    if (!token) {      throw new Error("Not Authenticated");    }    const payload = await jwt.verify(token, JWT_SECRET) as UserJWTPayload;    const userFromDb = await prisma.user.findUnique({      where: { id: payload?.id },    });    if (!userFromDb) throw new Error("Not Authenticated");    if (userFromDb.type === "twitter") {      if (!payload.accessToken) {        throw new Error("Not Authenticated");      }      const twUser = await getTwitterUser(payload.accessToken);      if (twUser?.id !== userFromDb.id) {        throw new Error("Not Authenticated");      }    }    res.json(userFromDb)  } catch (err) {    res.status(401).json("Not Authenticated")  }})// activate twitterOauth function when visiting the route app.get("/oauth/twitter", twitterOauth);app.listen(SERVER_PORT, () => console.log(`Server listening on port ${SERVER_PORT}`))