isabella232 / okta-graphql-vue-olympics-example

Secure GraphQL + Vue Example

Secure GraphQL + Vue Example

This example app shows how to use GraphQL and Vue.js to build a Olympic Events app and add authentication with Okta.

Please read Use Vue and GraphQL to Build a Secure App to see how this app was created.

Prerequisites: Node.js and an internet connection.

Okta 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
• Links
• Help
• License

Getting Started

To install this example application, run the following commands:

git https://github.com/oktadeveloper/okta-graphql-vue-olympics-example.git graphql-vue
cd graphql-vue

This will get a copy of the project installed locally. To install all of its dependencies and start each app, follow the instructions below.

To run the GraphQL API, cd into the olympics-server folder and install its dependencies:

npm i

Then start the server node index.js.

To run the client, cd into the olympics-client folder and run:

npm i
npm run serve

You won't be able to login unless you configure the app to use your Okta organization.

Setup Okta

Log in to your Okta Developer account (or sign up if you don’t have an account) and navigate to Applications > Add Application. Click Single-Page App, click Next, and give the app a name you’ll remember.

On the following screen, select Authorization Code for Grant type allowed and click Done to finalize the set-up.

Server Configuration

Open olympics-server/auth.js and replace {yourOktadomain} and {yourClientId} in the following code block.

const oktaJwtVerifier = new OktaJwtVerifier({
  clientId: '{yourClientId}',
  issuer: 'https://{yourOktaDomain}/oauth2/default'
});

NOTE: The value of {yourOktaDomain} should be something like dev-123456.okta.com. Make sure you don't include -admin in the value!

Client Configuration

For the client, set the issuer and client_id in olympics-client/main.js.

Vue.use(Auth, {
  issuer: 'https://{yourOktaDomain}/oauth2/default',
  client_id: '{yourClientId}',
  redirect_uri: 'http://localhost:8080/callback',
  pkce: true
});

Then restart both your server and client and you should be able to authenticate!

Links

This example uses the following libraries provided by Okta:

• Okta JWT Verifier
• Okta Vue SDK

Help

Please post any questions as comments on the blog post, or visit our Okta Developer Forums.

License

Apache 2.0, see LICENSE.