https://github.com/oktadev/okta-angular-graphql-example
A Quick Guide to Angular and GraphQL
https://github.com/oktadev/okta-angular-graphql-example
angular graphql
Last synced: about 2 months ago
JSON representation
A Quick Guide to Angular and GraphQL
- Host: GitHub
- URL: https://github.com/oktadev/okta-angular-graphql-example
- Owner: oktadev
- Created: 2021-10-18T19:16:45.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-11-02T02:44:14.000Z (over 4 years ago)
- Last Synced: 2026-04-21T13:59:36.438Z (2 months ago)
- Topics: angular, graphql
- Language: TypeScript
- Homepage: https://developer.okta.com/blog/2021/10/22/angular-graphql
- Size: 582 KB
- Stars: 0
- Watchers: 0
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Consume a GraphQL API from Angular Example
This repository shows you how to consume a GraphQL API from Angular. Please read [A Quick Guide to Angular and GraphQL][blog] to see how it was created.
**Prerequisites:**
- [Node 14](https://nodejs.org/)
- [Okta CLI](https://cli.okta.com)
> [Okta](https://developer.okta.com/) has Authentication and User Management APIs that reduce development time with instant-on, scalable user infrastructure. Okta's intuitive API and expert support make it easy for developers to authenticate, manage and secure users and roles in any application.
* [Getting Started](#getting-started)
* [Links](#links)
* [Help](#help)
* [License](#license)
## Getting Started
To run this example, run the following commands:
```bash
git clone https://github.com/oktadev/okta-angular-graphql-example.git
cd okta-angular-graphql-example
```
### Create an OIDC Application in Okta
Create a free developer account with the following command using the [Okta CLI](https://cli.okta.com):
```shell
okta register
```
If you already have a developer account, use `okta login` to integrate it with the Okta CLI.
Provide the required information. Once you register, create a client application in Okta with the following command:
```shell
okta apps create
```
You will be prompted to select the following options:
- Type of Application: **2: SPA**
- Redirect URI: `http://localhost:4200/login/callback`
- Logout Redirect URI: `http://localhost:4200`
The application configuration will be printed to your screen:
```shell
Okta application configuration:
Issuer: https://dev-133320.okta.com/oauth2/default
Client ID: 0oa5qedkihI7QcSoi357
```
Replace the values in `server/auth.js` with these values.
```js
const oktaJwtVerifier = new OktaJwtVerifier({
clientId: '{yourClientID}',
issuer: 'https://{yourOktaDomain}/oauth2/default',
});
```
Update `graphql-client/src/app/app.module.ts` with your Okta settings too.
```ts
const config = {
clientId: '{yourClientID}',
issuer: 'https://{yourOktaDomain}/oauth2/default',
redirectUri: window.location.origin + '/login/callback'
}
const oktaAuth = new OktaAuth(config);
```
If you haven't done so already, install the dependencies.
```shell
cd server
npm install
cd graphql-client
npm install
```
Start the GraphQL server in one terminal window with `node app.js`, and the Angular GraphQL client in another window.
```shell
ng serve
```
Open `http://localhost:4200` in your favorite browser and you should be able to log in and query for Star Wars characters.
## Links
This example uses the following open source libraries from Okta:
* [Okta Angular SDK](https://github.com/okta/okta-angular)
* [Okta CLI](https://github.com/okta/okta-cli)
## Help
Please post any questions as comments on the [blog post][blog], or visit our [Okta Developer Forums](https://devforum.okta.com/).
## License
Apache 2.0, see [LICENSE](LICENSE).
[blog]: https://developer.okta.com/blog/2021/10/22/angular-graphql