feat: New JWT in Every Authenticated Response

backend/src/auth/auth.ts

@@ -4,6 +4,7 @@ import { AuthChecker } from 'type-graphql'
 import decode from '../jwt/decode'
 import { apiGet } from '../apis/loginAPI'
 import CONFIG from '../config'
+import encode from '../jwt/encode'
 
 /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
 export const isAuthorized: AuthChecker<any> = async ({ root, args, context, info }, roles) => {
@@ -14,6 +15,7 @@ export const isAuthorized: AuthChecker<any> = async ({ root, args, context, info
         `${CONFIG.LOGIN_API_URL}checkSessionState?session_id=${decoded.sessionId}`,
       )
       context.sessionId = decoded.sessionId
+      context.setHeaders.push({ key: 'token', value: encode(decoded.sessionId) })
       return result.success
     }
   }

backend/src/graphql/models/LoginResponse.ts

@@ -0,0 +1,19 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+import { ObjectType, Field } from 'type-graphql'
+import { User } from '../models/User'
+import encode from '../../jwt/encode'
+
+@ObjectType()
+export class LoginResponse {
+  constructor(json: any) {
+    this.token = encode(json.sessionId)
+    this.user = new User(json.user)
+  }
+
+  @Field(() => String)
+  token: string
+
+  @Field(() => User)
+  user: User
+}

backend/src/graphql/resolvers/UserResolver.ts

@@ -4,10 +4,10 @@
 import { Resolver, Query, Args, Arg, Authorized, Ctx } from 'type-graphql'
 import CONFIG from '../../config'
 import { CheckUsernameResponse } from '../models/CheckUsernameResponse'
-import { User } from '../models/User'
 import { LoginViaVerificationCode } from '../models/LoginViaVerificationCode'
 import { SendPasswordResetEmailResponse } from '../models/SendPasswordResetEmailResponse'
 import { UpdateUserInfosResponse } from '../models/UpdateUserInfosResponse'
+import { LoginResponse } from '../models/LoginResponse'
 import {
   ChangePasswordArgs,
   CheckUsernameArgs,
@@ -16,12 +16,11 @@ import {
   UpdateUserInfosArgs,
 } from '../inputs/LoginUserInput'
 import { apiPost, apiGet } from '../../apis/loginAPI'
-import encode from '../../jwt/encode'
 
 @Resolver()
 export class UserResolver {
-  @Query(() => String)
-  async login(@Args() { email, password }: UnsecureLoginArgs): Promise<string> {
+  @Query(() => LoginResponse)
+  async login(@Args() { email, password }: UnsecureLoginArgs): Promise<LoginResponse> {
     email = email.trim().toLowerCase()
     const result = await apiPost(CONFIG.LOGIN_API_URL + 'unsecureLogin', { email, password })
 
@@ -30,10 +29,7 @@ export class UserResolver {
       throw new Error(result.data)
     }
 
-    const data = result.data
-    const sessionId = data.session_id
-    delete data.session_id
-    return encode({ sessionId, user: new User(data.user) })
+    return new LoginResponse({ sessionId: result.data.session_id, user: result.data.user })
   }
 
   @Query(() => LoginViaVerificationCode)

backend/src/index.ts

@@ -22,14 +22,15 @@ import { isAuthorized } from './auth/auth'
 
 const DB_VERSION = '0001-init_db'
 
-const context = (req: any) => {
-  const authorization = req.req.headers.authorization
+const context = (args: any) => {
+  const authorization = args.req.headers.authorization
   let token = null
   if (authorization) {
-    token = req.req.headers.authorization.replace(/^Bearer /, '')
+    token = authorization.replace(/^Bearer /, '')
   }
   const context = {
     token,
+    setHeaders: [],
   }
   return context
 }
@@ -61,8 +62,24 @@ async function main() {
   // Express Server
   const server = express()
 
+  const plugins = [
+    {
+      requestDidStart() {
+        return {
+          willSendResponse(requestContext: any) {
+            const { setHeaders = [] } = requestContext.context
+            setHeaders.forEach(({ key, value }: { [key: string]: string }) => {
+              requestContext.response.http.headers.append(key, value)
+            })
+            return requestContext
+          },
+        }
+      },
+    },
+  ]
+
   // Apollo Server
-  const apollo = new ApolloServer({ schema, playground, context })
+  const apollo = new ApolloServer({ schema, playground, context, plugins })
   apollo.applyMiddleware({ app: server })
 
   // Start Server

backend/src/jwt/encode.ts

@@ -5,13 +5,9 @@ import jwt from 'jsonwebtoken'
 import CONFIG from '../config/'
 
 // Generate an Access Token
-export default function encode(data: any): string {
-  const { user, sessionId } = data
-  const { email, language, firstName, lastName } = user
-  const token = jwt.sign({ email, language, firstName, lastName, sessionId }, CONFIG.JWT_SECRET, {
+export default function encode(sessionId: string): string {
+  const token = jwt.sign({ sessionId }, CONFIG.JWT_SECRET, {
     expiresIn: CONFIG.JWT_EXPIRES_IN,
-    // issuer: CONFIG.GRAPHQL_URI,
-    // audience: CONFIG.CLIENT_URI,
     subject: sessionId.toString(),
   })
   return token

frontend/src/graphql/queries.js

@@ -2,7 +2,17 @@ import gql from 'graphql-tag'
 
 export const login = gql`
   query($email: String!, $password: String!) {
-    login(email: $email, password: $password)
+    login(email: $email, password: $password) {
+      token
+      user {
+        email
+        username
+        firstName
+        lastName
+        language
+        description
+      }
+    }
   }
 `
 

frontend/src/store/store.js

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import createPersistedState from 'vuex-persistedstate'
-import VueJwtDecode from 'vue-jwt-decode'
+// import VueJwtDecode from 'vue-jwt-decode'
 
 Vue.use(Vuex)
 
@@ -30,15 +30,16 @@ export const mutations = {
 }
 
 export const actions = {
-  login: ({ dispatch, commit }, token) => {
-    const decoded = VueJwtDecode.decode(token)
-    commit('token', token)
-    commit('email', decoded.email)
-    commit('language', decoded.language)
-    commit('username', decoded.username)
-    commit('firstName', decoded.firstName)
-    commit('lastName', decoded.lastName)
-    commit('description', decoded.description)
+  login: ({ dispatch, commit }, data) => {
+    // const decoded = VueJwtDecode.decode(data.token)
+    const { user } = data
+    commit('token', data.token)
+    commit('email', user.email)
+    commit('language', user.language)
+    commit('username', user.username)
+    commit('firstName', user.firstName)
+    commit('lastName', user.lastName)
+    commit('description', user.description)
   },
   logout: ({ commit, state }) => {
     commit('token', null)

frontend/src/store/store.test.js

@@ -77,7 +77,17 @@ describe('Vuex store', () => {
     describe('login', () => {
       const commit = jest.fn()
       const state = {}
-      const commitedData = 'token'
+      const commitedData = {
+        token: 'token',
+        user: {
+          email: 'user@example.org',
+          language: 'de',
+          username: 'peter',
+          firstName: 'Peter',
+          lastName: 'Lustig',
+          description: 'Nickelbrille',
+        },
+      }
 
       it('calls seven commits', () => {
         login({ commit, state }, commitedData)