
<p>The <a href="https://www.wpgraphql.com/" target="_blank" rel="noreferrer noopener">WPGraphQL</a> plugin produces a public <code>/graphql</code> endpoint that can be queried for any published content. Because I want control over where my content is displayed and by whom, I have added JSON Web Token authentication to this site&#8217;s build process.</p>



<p>WPGraphQL maintains <a href="https://github.com/wp-graphql/wp-graphql-jwt-authentication" data-type="link" data-id="https://github.com/wp-graphql/wp-graphql-jwt-authentication">this JWT Authentication plugin</a> as a solution to authentication management. This plugin is installed in WordPress alongside the core WPGraphQL plugin and provides <code>LoginUser</code>, <code>RegisterUser</code>, and <code>RefreshAuthToken</code> mutations. My application will need to use these mutations to access my site&#8217;s content after I go into the WPGraphQL plugin&#8217;s management panel and restrict my endpoint to authenticated users.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="625" src="https://ravenwilde.net/wp-content/uploads/2024/03/JWT_demo_001-1024x625.png" alt="A screen capture of my WordPress admin interface's WPGraphQL General Settings tab. The checkbox labeled &quot;Restrict Endpoint to Authenticated Users&quot; is highlighted to draw attention to it on the interface. The checkbox is enabled/checked on." class="wp-image-105" srcset="https://ravenwilde.net/wp-content/uploads/2024/03/JWT_demo_001-1024x625.png 1024w, https://ravenwilde.net/wp-content/uploads/2024/03/JWT_demo_001-300x183.png 300w, https://ravenwilde.net/wp-content/uploads/2024/03/JWT_demo_001-768x469.png 768w, https://ravenwilde.net/wp-content/uploads/2024/03/JWT_demo_001.png 1261w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>The WPGraphQL JWT Authentication plugin documentation does a good job explaining how these mutations work and <a href="https://github.com/wp-graphql/wp-graphql-jwt-authentication?tab=readme-ov-file#example-using-graphiql" data-type="link" data-id="https://github.com/wp-graphql/wp-graphql-jwt-authentication?tab=readme-ov-file#example-using-graphiql">provides a demo of their usage</a> in a GraphiQL sandbox.  Actually implementing them within my application took a bit of exploration and iteration before I could get a solution working end to end.</p>



<h2 class="wp-block-heading">What follows are my implementation notes&#8230;.</h2>



<h3 class="wp-block-heading">Environment variables &amp; credentials</h3>



<p>The username and password are provided by WordPress. To set this up securely, I created a WordPress user to manage the connection to my application. On the Account Management panel for this user account, all the way at the bottom is an application password generator.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="666" src="https://ravenwilde.net/wp-content/uploads/2024/03/JWT_demo_002-1024x666.png" alt="" class="wp-image-109" srcset="https://ravenwilde.net/wp-content/uploads/2024/03/JWT_demo_002-1024x666.png 1024w, https://ravenwilde.net/wp-content/uploads/2024/03/JWT_demo_002-300x195.png 300w, https://ravenwilde.net/wp-content/uploads/2024/03/JWT_demo_002-768x500.png 768w, https://ravenwilde.net/wp-content/uploads/2024/03/JWT_demo_002.png 1455w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>I included the username and application password in my <code>.env.local</code> file:</p>



<pre class="wp-block-code"><code>WORDPRESS_API_URL='https://your-domain.com/graphql'
WORDPRESS_USERNAME='wpgraphql_demo'
WORDPRESS_PASSWORD='vrya 2sGJ 8My1 TWOI VB1F ajz7'</code></pre>



<p>These credentials are required by the WPGraphQL JWT Authentication mutations.</p>



<h3 class="wp-block-heading">The JWToken authentication workflow</h3>



<p>The JSON Web Tokens workflow is a self contained way to provide an authenticated user (in my case my web application&#8217;s build process is the user) with a secure token that can be included in content requests in order to confirm access permission.</p>



<p>As implemented in my site&#8217;s build code, each request to my GraphQL endpoint now runs the following workflow:</p>



<ol class="wp-block-list">
<li>The <code>fetchToken</code> request supplies the <code>LoginUser</code> mutation and credentials. </li>



<li>Upon successful authentication, an <code>authToken</code> valid for &lt; 300 seconds is returned and set as an HTTP Authorization header.</li>



<li>The subsequent <code>fetchAPI</code> request supplies a query for content. The <code>authToken</code> in the HTTP Authorization header is used by the endpoint to authenticate this request prior to execution of the query.</li>



<li>Upon successful verification that the <code>authToken</code> is valid, site content is returned and compiled into the static website you are reading right now.</li>
</ol>



<h3 class="wp-block-heading">JWT authentication code example</h3>



<pre class="wp-block-code"><code>const API_URL = process.env.WORDPRESS_API_URL

/**
 * Fetches the API to get the JWT refresh token
 * @returns {Promise&lt;string>} The JWT refresh token
 */
export async function fetchToken() {
  const query = `
    mutation LoginUser($input: LoginInput!) {
      login(input: $input) {
        authToken
        user {
          id
          name
        }
      }
    }
  `
  const variables = { input: {
      clientMutationId: v4(),
      username: process.env.WORDPRESS_USERNAME,
      password: process.env.WORDPRESS_PASSWORD,
    }
  }

  const res = await fetch(API_URL, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      query,
      variables,
    }),
  })
  const json = await res.json()

  if (json.data.login) {
    return json.data.login.authToken
  } else {
    throw new Error(`Failed to fetch API token`)
  }
}

async function fetchAPI(query = '', { variables }: Record&lt;string, any> = {}) {
  const headers = { 'Content-Type': 'application/json' }

  const token = await fetchToken();

  if (token) {
    headers&#91;
      'Authorization'
    ] = `Bearer ${token}`
  }

  // WPGraphQL Plugin must be enabled
  const res = await fetch(API_URL, {
    headers,
    method: 'POST',
    body: JSON.stringify({
      query,
      variables,
    }),
  })

  const json = await res.json()
  if (json.errors) {
    console.error(json.errors)
    throw new Error('Failed to fetch API')
  }
  return json.data
}</code></pre>


jennifer.codes | development blog

WPGraphQL JWT Authentication

More Stories

Utilizing Emotion, Tailwind, and Radix for Advanced Color Theming

New Year, New Website