, (*1)
WPGraphQL JWT Authentication
, (*2)
This plugin extends the WPGraphQL plugin to provide authentication using JWT (JSON Web Tokens), (*3)
JSON Web Tokens are an open, industry standard RFC 7519 method for representing claims securely between two parties., (*4)
This plugin was initially based off the wp-api-jwt-auth
plugin by Enrique Chavez (https://github.com/Tmeister), but modified (almost completely) for use with the WPGraphQL plugin., (*5)
Install, Activate & Setup
You can install and activate the plugin like any WordPress plugin. Download the .zip from Github and add to your plugins directory, then activate., (*6)
JWT uses a Secret defined on the server to validate the signing of tokens., (*7)
It's recommended that you use something like the WordPress Salt generator (https://api.wordpress.org/secret-key/1.1/salt/) to generate a Secret., (*8)
You can define a Secret like so:, (*9)
define( 'GRAPHQL_JWT_AUTH_SECRET_KEY', 'your-secret-token' );
Or you can use the filter graphql_jwt_auth_secret_key
to set a Secret like so:, (*10)
add_filter( 'graphql_jwt_auth_secret_key', function() {
return 'your-secret-token';
});
This secret is used in the encoding and decoding of the JWT token. If the Secret were ever changed on the server, ALL tokens that were generated with the previous Secret would become invalid. So, if you wanted to invalidate all user tokens, you can change the Secret on the server and all previously issued tokens would become invalid and require users to re-authenticate., (*11)
- Learn more about JWT: https://jwt.io/introduction/
HTTP_AUTHORIZATION
In order to use this plugin, your WordPress environment must support the HTTP_AUTHORIZATION header. In some cases, this header is not passed to WordPress because of some server configurations., (*12)
Depending on your particular environment, you may have to research how to enable these headers, but in Apache, you can do the following in your .htaccess
:, (*13)
SetEnvIf Authorization "(.*)" HTTP_AUTHORIZATION=$1
For NGINX, this may work: https://serverfault.com/questions/511206/nginx-forward-http-auth-user#answer-511612, (*14)
How the plugin Works
Login User
This plugin adds a new login
mutation to the WPGraphQL Schema., (*15)
This can be used like so:, (*16)
Input-Type: LoginUserInput!
, (*17)
mutation LoginUser {
login( input: {
clientMutationId: "uniqueId",
username: "your_login",
password: "your password"
} ) {
authToken
user {
id
name
}
}
}
The authToken
that is received in response to the login mutation can then be stored in local storage (or similar) and
used in subsequent requests as an HTTP Authorization header to Authenticate the user prior to execution of the
GraphQL request., (*18)
-
Set authorization header in Apollo Client: https://www.apollographql.com/docs/react/networking/authentication/#header
-
Set authorization header in Relay Modern: https://relay.dev/docs/en/network-layer.html
-
Set authorization header in Axios: https://github.com/axios/axios#axioscreateconfig
Register User
Input-Type: RegisterUserInput!
, (*19)
mutation RegisterUser {
registerUser(
input: {
clientMutationId: "uniqueId",
username: "your_username",
password: "your_password",
email: "your_email"
}) {
user {
jwtAuthToken
jwtRefreshToken
}
}
}
Refresh Auth Token
Input-Type: RefreshJwtAuthTokenInput!
, (*20)
mutation RefreshAuthToken {
refreshJwtAuthToken(
input: {
clientMutationId: "uniqueId"
jwtRefreshToken: "your_refresh_token",
}) {
authToken
}
}
Filters
The plugin offers some filters to hook into., (*21)
Change Auth Token expiration
Note: For security, we highly recommend, that the Auth Token is short lived. So do not set this higher than 300 seconds unless you know what you are doing., (*22)
function custom_jwt_expiration( $expiration ) {
return 60;
}
add_filter('graphql_jwt_auth_expire', 'custom_jwt_expiration', 10);
- Argument: Expiration in seconds
- Default: 300
Example using GraphiQL
, (*23)