⚡ Angular GraphQL Okta

• Angular used with Material components, Okta access control, GraphQL + Apollo to view a backend data set.
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• ⚡ Angular GraphQL Okta
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 🔧 Testing
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status, Testing & To-Do List
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

** Frontend

• Angular frontend uses Okta for auth login/logout with OAuth 2.0 Authorization Code with PKCE flow
• Data page displays table of database data with working filter input

** Backend

• Apollo-server resolvers used to process GraphQL operations on database data
• uuid creates a unique id string for each part

📷 Screenshots

📶 Technologies

• Angular v16 javascript framework

• Okta Angular SDK v4

• Okta CLI

• Okta has Authentication and User Management APIs that reduce development time with instant-on, scalable user infrastructure.

• GraphQL v16 API query language

• Angular Material v16 menu toolbar & table to display data

• Apollo Client v3 used with Apollo-Angular v3 GraphQL Client for Angular Framework

• Node.js v18 Javascript runtime using the [Chrome V8 engine](https://v8.dev/

• Apollo Server v3 for unified data communications

• uuid v9 to create RFC4122 UUIDs

💾 Setup

** Frontend

• npm i to install dependencies
• You will need to install the Okta CLI. I installed it on Windows 10 Home using the Chocolatey package manager
• You will need an Okta developer account then use okta login to integrate it with the Okta CLI.
• In Okta apps, create a client app then add options: Type of Application: SPA, Redirect URI: http://localhost:4200/login/callback, Logout Redirect URI: http://localhost:4200 (You must add these redirect URIs or login will not work)
• Add issuer and Client-ID to app.module.ts
• ng serve runs frontend on http://localhost:4200 with auto-restart after changes

** Backend

• npm i to install dependencies
• npm run dev to start node server

🔧 Testing

• tba

💻 Code Examples

• Frontend graphql.queries.ts code to define what fields should be returned with a parts query

import { gql } from 'apollo-angular';

const PARTS_LIST = gql`
  query {
    parts {
      name
      quantity
      weight
      criticalPart
      createdDate
    }
  }
`;

export { PARTS_LIST };

🆒 Features

• Material table to display backend data
• GraphQL uses strong data types and ensures no over or under-fetching od data
• Okta Authguard to restrict user access to certain pages

📋 Status, Testing & To-Do List

• Status: Working, unfinished.
• To-Do frontend: new nav bar & Okta access data.
• To-Do backend: add data API-postgres? Use filter functions or remove.

👏 Inspiration

• Apollo-Angular documentation

📁 License

• This project is licensed under the terms of the MIT license.

✉️ Contact

• Repo created by ABateman, email: gomezbateman@yahoo.com