Step-by-Step Angular WordPress Integration with GraphQL JWT Authentication

Angular WordPress Integration: Setting Up JWT Authentication with GraphQLss-powered Angular: JWT Authentication Using GraphQL

In this tutorial, we will walk you through setting up JWT authentication using GraphQL in a WordPress-powered Angular application. This involves integrating Angular with WordPress using GraphQL and ensuring secure authentication with JSON Web Tokens (JWT).

Table of Contents

1. Prerequisites
2. Setting Up WordPress
3. Installing Essential Plugins
4. Configuring JWT on WordPress
5. Setting Up Angular Project
6. Integrating GraphQL
7. Implementing JWT Authentication
8. Testing the Application

Prerequisites

• Basic understanding of WordPress, Angular, and GraphQL
• Node.js and npm installed
• Angular CLI installed

Setting Up WordPress

1. Install WordPress on your server or local development environment.
2. Ensure permalinks are set to “Post name” for proper query handling.

Installing Essential Plugins

To integrate JWT and GraphQL with WordPress, you will need the following plugins:

• JWT Authentication for WP REST API
• WPGraphQL

You can install these plugins from the WordPress dashboard:

1. Navigate to Plugins > Add New.
2. Search for “JWT Authentication for WP REST API” and “WPGraphQL”.
3. Install and activate both plugins.

Configuring JWT on WordPress

Once the plugins are activated, you need to configure JWT authentication. Add the following lines to your wp-config.php file:

define('JWT_AUTH_SECRET_KEY', 'your-secret-key');
define('JWT_AUTH_CORS_ENABLE', true);

Replace your-secret-key with a secure secret key. You can generate a secret key using any random key generator.

Setting Up Angular Project

Create a new Angular project using Angular CLI:

ng new wp-angular-auth
cd wp-angular-auth

Install necessary packages:

npm install apollo-angular apollo-angular-link-http graphql

Integrating GraphQL

Create an Apollo service to interact with the WordPress GraphQL endpoint.

1. Generate a new service:

ng generate service apollo

2. Configure Apollo Client in the service (src/app/apollo.service.ts):

import { Injectable } from '@angular/core';
import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client/core';
import { Apollo } from 'apollo-angular';

@Injectable({
  providedIn: 'root'
})
export class ApolloService {
  constructor(private apollo: Apollo) {
    const httpLink = new HttpLink({
      uri: 'https://your-wordpress-site.com/graphql'
    });

    apollo.create({
      link: httpLink,
      cache: new InMemoryCache()
    });
  }
}

Implementing JWT Authentication

1. Create a new service for authentication:

ng generate service auth

2. Implement JWT authentication in the service (src/app/auth.service.ts):

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Apollo } from 'apollo-angular';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  private authEndpoint = 'https://your-wordpress-site.com/wp-json/jwt-auth/v1/token';

  constructor(private http: HttpClient, private apollo: Apollo) {}

  login(username: string, password: string) {
    return this.http.post(this.authEndpoint, { username, password });
  }

  setToken(token: string) {
    localStorage.setItem('jwt_token', token);
  }

  getToken() {
    return localStorage.getItem('jwt_token');
  }

  logout() {
    localStorage.removeItem('jwt_token');
  }
}

3. Update Apollo service to include JWT token in requests:

import { setContext } from '@apollo/client/link/context';
import { HttpLink, InMemoryCache } from '@apollo/client/core';
import { Apollo } from 'apollo-angular';

@Injectable({
  providedIn: 'root'
})
export class ApolloService {
  constructor(private apollo: Apollo, private authService: AuthService) {
    const httpLink = new HttpLink({
      uri: 'https://your-wordpress-site.com/graphql'
    });

    const authLink = setContext((_, { headers }) => {
      const token = this.authService.getToken();
      return {
        headers: {
          ...headers,
          Authorization: token ? `Bearer ${token}` : '',
        }
      };
    });

    apollo.create({
      link: authLink.concat(httpLink),
      cache: new InMemoryCache()
    });
  }
}

Testing the Application

To test the implementation, create a simple login component and ensure that you can authenticate and fetch data from the WordPress GraphQL endpoint.

1. Generate login component:

ng generate component login

2. Implement login functionality (src/app/login/login.component.ts):

import { Component } from '@angular/core';
import { AuthService } from '../auth.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html'
})
export class LoginComponent {
  username: string = '';
  password: string = '';

  constructor(private authService: AuthService) {}

  login() {
    this.authService.login(this.username, this.password).subscribe((response: any) => {
      this.authService.setToken(response.token);
      console.log('Logged in successfully');
    }, (error) => {
      console.error('Login failed', error);
    });
  }
}

3. Update the template (src/app/login/login.component.html):

<form (submit)="login()">
  <label for="username">Username</label>
  <input id="username" [(ngModel)]="username" placeholder="Enter username" required>
  
  <label for="password">Password</label>
  <input id="password" type="password" [(ngModel)]="password" placeholder="Enter password" required>
  
  <button type="submit">Login</button>
</form>

Your Angular application is now integrated with WordPress using GraphQL and JWT for authentication. You can further extend the functionality by adding more features and securing other parts of your application.

Conclusion

We have successfully created a WordPress-powered Angular application with JWT authentication using GraphQL. This setup ensures a secure and scalable solution for modern web applications combining the power of WordPress, Angular, and GraphQL.