Hello!
10 | {user ? (// user present so only display user's name 11 |{user.name}
12 | ) : (// user not present so prompt to login 13 |You are not Logged in! Login with:
15 |{" twitter"}
28 | 29 | ); 30 | } -------------------------------------------------------------------------------- /server/src/config.ts: -------------------------------------------------------------------------------- 1 | import { PrismaClient, User } from "@prisma/client" 2 | import { CookieOptions, Response } from "express"; 3 | import { TwitterUser } from "./oauth2"; 4 | import jwt from "jsonwebtoken"; 5 | 6 | export const CLIENT_URL = process.env.CLIENT_URL! 7 | export const SERVER_PORT = process.env.SERVER_PORT! 8 | export const prisma = new PrismaClient() 9 | 10 | // step 3 11 | export function upsertUser(twitterUser: TwitterUser) { 12 | // create a new user in our database or return an old user who already signed up earlier 13 | return prisma.user.upsert({ 14 | create: { 15 | username: twitterUser.username, 16 | id: twitterUser.id, 17 | name: twitterUser.name, 18 | type: "twitter", 19 | }, 20 | update: { 21 | id: twitterUser.id, 22 | }, 23 | where: { id: twitterUser.id}, 24 | }); 25 | } 26 | 27 | // JWT_SECRET from our environment variable file 28 | export const JWT_SECRET = process.env.JWT_SECRET! 29 | 30 | // cookie name 31 | export const COOKIE_NAME = 'oauth2_token' 32 | 33 | // cookie setting options 34 | const cookieOptions: CookieOptions = { 35 | httpOnly: true, 36 | sameSite: "strict" 37 | } 38 | 39 | // step 4 40 | export function addCookieToRes(res: Response, user: User, accessToken: string) { 41 | const { id, type } = user; 42 | const token = jwt.sign({ // Signing the token to send to client side 43 | id, 44 | accessToken, 45 | type 46 | }, JWT_SECRET); 47 | res.cookie(COOKIE_NAME, token, { // adding the cookie to response here 48 | ...cookieOptions, 49 | expires: new Date(Date.now() + 7200 * 1000), 50 | }); 51 | } -------------------------------------------------------------------------------- /server/src/index.ts: -------------------------------------------------------------------------------- 1 | import { CLIENT_URL, COOKIE_NAME, JWT_SECRET, prisma, SERVER_PORT } from "./config"; 2 | import cookieParser from "cookie-parser"; 3 | import cors from "cors"; 4 | import express from "express"; 5 | import jwt from 'jsonwebtoken' 6 | import { getTwitterUser, twitterOauth } from "./oauth2"; 7 | import { User } from "@prisma/client"; 8 | 9 | const app = express(); 10 | const origin= [CLIENT_URL]; 11 | app.use(cookieParser()); 12 | app.use(cors({ 13 | origin, 14 | credentials: true 15 | })) 16 | app.get("/ping", (_, res) => res.json("pong")); 17 | 18 | type UserJWTPayload = PickHello!
74 |{" twitter"}
265 | 266 | ); 267 | } 268 | ``` 269 | > **Note**: We are hard coding `code_challenge` and `code_verifier` for simplicity. You can randomly generate it. 270 | 271 | After adding the above code in `client\components\TwitterOauthButton.tsx`, we will add a twitter SVG icon (from online resources like [this](https://icons8.com/icons/set/twitter)) on path `client\public\twitter.svg`. 272 | Then we will import the component on the homepage: 273 | ```ts 274 | import { TwitterOauthButton } from "../components/TwitterOauthButton"; 275 | 276 | const Home: NextPage = () => { 277 | return ( 278 |Hello!
280 |Hello!
340 | {user ? (// user present so only display user's name 341 |{user.name}
342 | ) : (// user not present so prompt to login 343 |You are not Logged in! Login with:
345 |