Nuxt + Express + Supabase 인증

nuxt

Nuxt + Express + Supabase 인증

nuxt 사용시 미들웨어에서 supabse 인증하는 방법

 

1. Express middleware 구성

1) express 설치

npm install express --save

2) middleware 설정

nuxt.config.js

serverMiddleware: ['~/api/index.js']

3) express 샘플 코드

~/api/index.js 생성

const express = require('express')
const app = express()

app.get('/', async (request, response) => {
  response.send('ok')
})

module.exports = {
  path: '/api',
  handler: app,
}

 

2. Supabase 연동

1) @supabase/supabase-js 설치

npm install @supabase/supabase-js

2) 샘플 코드

supabase client 설정

import { createClient } from '@supabase/supabase-js'
export const supabase = createClient(process.env.SUPABASE_URL, process.env.SUPABASE_KEY)

express 코드

app.get('/', async (request, response) => {
  const { user } = await supabase.auth.api.getUserByCookie(request)
  if (!user) {
    return response.status(401).send('Unauthorized')
  }
  response.send('ok')
})

cookie-parser 설정이 안되어있으면 아래 에러가 발생한다.

token: null,
user: null,
data: null,
error: Error: Not able to parse cookies! When using Express make sure the cookie-parser middleware is in use!
    at GoTrueApi.<anonymous> (/Users/eddie/Git/test/web/node_modules/@supabase/gotrue-js/dist/main/GoTrueApi.js:553:27)
    at Generator.next (<anonymous>)
    at /Users/eddie/Git/test/web/node_modules/@supabase/gotrue-js/dist/main/GoTrueApi.js:8:71
    at new Promise (<anonymous>)
    at __awaiter (/Users/eddie/Git/test/web/node_modules/@supabase/gotrue-js/dist/main/GoTrueApi.js:4:12)
    at GoTrueApi.getUserByCookie (/Users/eddie/Git/test/web/node_modules/@supabase/gotrue-js/dist/main/GoTrueApi.js:550:16)
    at /Users/eddie/Git/test/web/api/index.js:8:50
    at Layer.handle [as handle_request] (/Users/eddie/Git/test/web/node_modules/express/lib/router/layer.js:95:5)
    at next (/Users/eddie/Git/test/web/node_modules/express/lib/router/route.js:144:13)
    at Route.dispatch (/Users/eddie/Git/test/web/node_modules/express/lib/router/route.js:114:3

3) cookie-parser 설정

npm install --save cookie-parser

const cookieParser = require('cookie-parser')
const express = require('express')
const app = express()
app.use(cookieParser())

다시 user data를 조회해보면

{
  token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJhdXRoZUERekqerhQERa3kIiwiZXhwIjoxNjYwNTM0MjIzLCJzdWIiOiI2YzY3NDExYy1kOTYwLTRiMWEt4412ODg2My1lYjU4YmExYmUwZWYiLWFpbC213I6ImRvbmdnb3ZAZ21haWwuY29tIiwicGhvbmUiOiIiLCJhWV0YW341RhdGEiOnsicHJvd3rAer8aOiJnb29nbGUiLCJwcm9rf3RlcnMiOlsiZ2l0aHViIiwiZ29vZ2xlIrerl19LCJ1c2VyX21ldGFhIjp7ImF2YXRhcl91cmwiOiJodHRwczovL2xoMy5nb29nbGV1c2VyY29udGVudC5jb20vYS0vQaeir3EARhC5jb20iLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiZnVsbF9uYW1lIjoiRWRkaWUgS2ltIiwiaXNzIjaHR0MjAyMjI4NTU5IiwidXNlcl9uYW1lIjoiZG9uZ2dvdiJ9LCJyb2xlIjoiYXV0aGVudGljYXRCJ9.i-cALCE_2G6eXtn7Vy8VHbWoqYmja4ryY3bR#3',
  user: {
    id: '9c69441c-a930-4b2a-9963-eb33barb30ef',
    aud: 'authenticated',
    role: 'authenticated',
    ...
    app_metadata: {
      provider: 'google',
      providers: [Array]
    },
    user_metadata: {
      ...
    },
    identities: [
      [Object],
      [Object]
    ],
    created_at: '2022-07-24T06:54:47.029616Z',
    updated_at: '2022-08-15T02:30:40.673245Z'
  },
  data: {
    aud: 'authenticated',
    role: 'authenticated',
    email: 'donggov@gmail.com',
    app_metadata: {
      ...
    },
    user_metadata: {
        ...
    },
    identities: [
      [Object],
      [Object]
    ],
    created_at: '2022-07-24T06:54:47.029616Z',
    updated_at: '2022-08-15T02:30:40.673245Z'
  },
  error: null
}