## Create your directory structure Mine will be like this: ``` wpgraphql-nuxt-apollo-with-jwt/ ├── app/ (Nuxt) └── wordpress/ (WordPress) ``` Easily created (on macOS with zsh) ```shell $ mkdir -p wpgraphql-nuxt-apollo-with-jwt/{app,wordpress} ``` ## Set up your WordPress installation and MySQL Database Check out [this post](/blog/installing-wordpress-from-command-line) for instructions how how to set this up using the WP-CLI utility. ## Installing the required WordPress plugins You will need the following WordPress plugins: 1. [WPGraphQL](https://github.com/wp-graphql/wp-graphql/releases) 2. [WPGraphQL JWT Authentication](https://github.com/wp-graphql/wp-graphql-jwt-authentication/releases) Using WP-CLI to install and activate: ```shell $ wp plugin install https://github.com/wp-graphql/wp-graphql/releases/download/v1.13.8/wp-graphql.zip $ wp plugin install https://github.com/wp-graphql/wp-graphql-jwt-authentication/archive/refs/tags/v0.6.0.zip $ wp plugin activate wp-graphql $ wp plugin activate wp-graphql-jwt-authentication ``` Now you should be able to hit the graphql endpoint and get an error from WPGraphQL: ```shell $ curl -i http://tutorialwp.l0cal/graphql | grep GraphQL X-GraphQL-URL: http://tutorialwp.l0cal/graphql X-GraphQL-Query-ID: X-GraphQL-Keys: graphql:Query {"errors":[{"message":"GraphQL Request must include at least one of those two parameters: \"query\" or \"queryId\"","extensions":{"category":"request"}}],"extensions":{"debug":[{"type":"DEBUG_LOGS_INACTIVE","message":"GraphQL Debug logging is not active. To see debug logs, GRAPHQL_DEBUG must be enabled."}]}}% ``` We need to set a secret key for the JWT plugin, I use OpenSSL to generate mine (can be anything you like as long as it's unique), we'll also set `GRAPHQL_DEBUG` to `true` ```shell $ wp config set GRAPHQL_JWT_AUTH_SECRET_KEY "`openssl rand -base64 64`" $ wp config set GRAPHQL_DEBUG true --raw ``` ## Setting up the Nuxt application and modules We'll need to install Nuxt and some other packages (Nuxt Apollo, graphql, Pinia, etc) *Note: Not sure all of these packages are required, I'll go through and clean this up later.* ```shell $ cd .. $ npx nuxi init app $ cd app $ npm i --save @nuxtjs/apollo@next @pinia/nuxt @vue/apollo-composable @apollo/client pinia-plugin-persistedstate-2 graphql js-cookie cookie --legacy-peer-deps ``` You may need to do this: ```shell $ npm i pinia -f ``` Create our folder structure: ```shell $ mkdir {gql,pages,layouts,composables,components,plugins,store} ``` We'll set up three plugins, `persistedstate.universal.ts`, `apollo.ts` and `user.client.ts` This first plugin will allow your pinia stores to persist across reloads: ```ts[plugins/persistedstate.universal.ts] import {createPersistedStatePlugin} from "pinia-plugin-persistedstate-2" import Cookies from "js-cookie" import cookie from "cookie" export default defineNuxtPlugin(function ({$pinia, ssrContext}) { $pinia.use( createPersistedStatePlugin({ storage: { getItem: (key) => { if (process.server && ssrContext) { const parsedCookies = cookie.parse(ssrContext.req.headers.cookie) return parsedCookies[key] } else { return Cookies.get(key) } }, setItem: (key, value) => { Cookies.set(key, value, {expires: 365, secure: false}) }, removeItem: (key) => Cookies.remove(key), } }) ) }) ```` This plugin catches the `apollo:auth` hook and checks your token expiry, and will try to refresh automatically if needed. It is also responsible for inserting your Authorization header for subsequent requests so that you can access the WPGraphQL endpoint as the user you've logged in as. ```ts[plugins/apollo.ts] import {useUserStore} from "~/store/user" import {parseJwt} from "~/src/StringUtils" import refreshToken from "~/gql/refreshJwtAuthToken.gql" import {_AsyncData} from "#app/composables/asyncData" export default defineNuxtPlugin((nuxtApp) => { let refreshingToken = false const userStore = useUserStore() const tryRefresh = async () => { if (!refreshingToken && userStore?.refreshToken) { const expiryDate = new Date(parseJwt(userStore.refreshToken).exp * 1000) const beforeExpiry = new Date(expiryDate.getTime() - 30 * 1000) const shouldRenew = new Date().getTime() > beforeExpiry.getTime() if (shouldRenew) { console.log("expired! renewing...") refreshingToken = true await useAsyncQuery(refreshToken, {jwtRefreshToken: userStore.refreshToken}) .then((result: _AsyncData) => { if (result.error.value) { const message = result.error.value?.message console.error(message) } else if (result?.data) { const data = result.data.value.refreshJwtAuthToken userStore.update({ authToken: data.authToken, refreshToken: data.refreshToken, }) } } ) } } } nuxtApp.hook("apollo:auth", async ({client, token}) => { await tryRefresh() token.value = userStore.authToken || null }) }) ``` This plugin provides some user functionality to the app (as `app.$user`) ```ts[plugins/user.client.ts] import {useUserStore} from "~/store/user" import {defineNuxtPlugin, useNuxtApp, useState} from "#app" import {_AsyncData} from "#app/composables/asyncData" // @ts-ignore import userLogin from "~/gql/userLogin.gql" export default defineNuxtPlugin(function () { const user = { ...useUserStore(), doLogin: async (username: string, password: string) => { const app = useNuxtApp() const errorMessage = useState("errorMessage") const userStore = useUserStore() await useAsyncQuery(userLogin, {username, password}) .then((result: _AsyncData) => { if (result.error.value) { const message = result.error.value?.message if (message === "incorrect_password") { errorMessage.value = "Sorry, please try again." } else if (message === "empty_username") { errorMessage.value = "You must specify a username." } else if (message === "invalid_username") { errorMessage.value = "Please check your details and try again." } else { errorMessage.value = message } } else if (result?.data) { const data = result.data.value.login userStore.update({ username: data.user.username, name: data.user.name, userId: data.user.userId, authToken: data.authToken, refreshToken: data.authToken, email: data.user.email, loggedIn: true }) userStore.loggedIn = true app.$router.push("/profile") } } ) } } return { provide: { user } } }) ```` Next we'll update our `nuxt.config.ts` with some configuration for apollo and our plugins / modules. ```ts[nuxt.config.ts] export default defineNuxtConfig({ build: { transpile: [ "graphql", "@apollo/client/core", "@vue/apollo-composable" ], }, modules: [ "@nuxtjs/apollo", "@pinia/nuxt", ], plugins: [ "~/plugins/persistedstate.universal.ts", "~/plugins/user.client.ts" ], runtimeConfig: { graphqlApiEndpoint: "/graphql" }, vite: { // Set up vite to hit the WPGraphQL endpoint using a proxy, to avoid CORS issues server: { proxy: { "/graphql": "http://tutorialwp.l0cal", } } }, // Note: Apollo Configuration is not yet set up to extend NuxtConfig // @ts-ignore apollo: { autoImports: true, authType: "Bearer", authHeader: "Authorization", tokenStorage: "cookie", proxyCookies: true, clients: { default: { httpEndpoint: "/graphql", httpLinkOptions: { httpOnly: false } }, }, cookieAttributes: { maxAge: 60 * 60 * 24 }, }, }) ``` ## Add GraphQL Queries/Mutations ```sql[gql/login.gql] mutation login($username: String!, $password: String!) { login(input: {username: $username, password: $password}) { authToken refreshToken user { userId name username email } } } ``` ```sql[gql/registerUser.gql] mutation registerUser( $username: String!, $lastName: String, $firstName: String, $email: String!, $password: String! ) { registerUser( input: { username: $username, email: $email, lastName: $lastName, firstName: $firstName, password: $password }) { user { id } } } ``` ```sql[gql/refreshJwtAuthToken.gql] mutation refreshJwtAuthToken($jwtRefreshToken: String!) { refreshJwtAuthToken(input: {jwtRefreshToken: $jwtRefreshToken}) { authToken } } ``` ```sql[gql/refreshJwtRefreshToken.gql] query viewer { jwtRefreshToken } ``` ```sql[gql/userInfo.gql] query viewer { firstName email lastName name nicename nickname registeredDate username } ``` ## Create our app.vue and default layout ```vue[app.vue] ``` ```vue[layouts/default.vue] ``` ## Create our pages ```vue[pages/register.vue] ``` ```vue[pages/login.vue] ``` ```vue[pages/index.vue] ``` ```vue[pages/login.vue] ``` ```vue[pages/profile.vue] ``` ## And now some components ```vue[components/Navigation.vue] ``` ```vue[components/forms/Register.vue] ``` ```vue[components/forms/Login.vue] ``` ## And a composable for handling JWT Refresh Token parsing ```ts[composables/useJwtUtils.ts] import { UserInformation } from "~/store/user" import { UnwrapRef } from "vue" import { _ExtractStateFromSetupStore } from "pinia" export function parseJwt(token: UnwrapRef<_ExtractStateFromSetupStore<{ logout: () => void; domain?: Ref; authToken?: Ref; loggedIn?: Ref; name?: Ref; update: (values: UserInformation) => void; userId?: Ref; email?: Ref; username?: Ref; refreshToken?: Ref }>["refreshToken"]> | undefined) { if(!token) return ""; var base64Url = token.split(".")[1] var base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/") var jsonPayload = decodeURIComponent(window.atob(base64).split("").map(function (c) { return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2) }).join("")) return JSON.parse(jsonPayload) } ``` ## And finally our pinia store ```ts[store/user.ts] import { Ref, ref } from "vue" import { defineStore } from "pinia" export interface UserInformationRefs { userId?: Ref username?: Ref name?: Ref firstName?: Ref lastName?: Ref email?: Ref domain?: Ref authToken?: Ref refreshToken?: Ref loggedIn?: Ref } export interface UserInformation { userId?: number username?: string name?: string firstName?: string lastName?: string email?: string domain?: string authToken?: string refreshToken?: string loggedIn?: boolean } export const useUserStore = defineStore("user", () => { const app = useNuxtApp() const userId = ref(0) const username = ref("") const name = ref("") const firstName = ref("") const lastName = ref("") const email = ref("") const domain = ref("") const authToken = ref("") const refreshToken = ref("") const loggedIn = ref(false) const userInfo: UserInformationRefs = { authToken, refreshToken, userId, username, firstName, lastName, domain, name, email, loggedIn } function logout() { update({ userId: undefined, username: undefined, name: undefined, firstName: undefined, lastName: undefined, email: undefined, domain: undefined, authToken: undefined, refreshToken: undefined, loggedIn: false }) app.$router.push("/login") } function update(values: UserInformation) { Object.keys(values).forEach(function (key) { if (key in userInfo) { // or obj1.hasOwnProperty(key) // @ts-ignore userInfo[key].value = values[key] } }) } return { update, logout, ...userInfo } }) ```

Profile