Git Product home page Git Product logo

okta-express-graphql-example's Introduction

Example API Using GraphQL, Express, and Okta

This is an example API, showing how to create a GraphQL endpoint in Node. The mutations are protected behind authentication provided by Okta. To follow along step-by-step, check out the blog post.

Prerequisites: Node.js.

Getting Started

To install this example application, run the following commands:

git clone [email protected]:oktadeveloper/okta-express-graphql-example.git
cd okta-express-graphql-example
npm install

This will install a local copy of the project. You will need to set up some environment variables before the app will run properly.

To integrate Okta's Identity Platform for user authentication, you'll first need to:

You will need to create an application in Okta:

  • Log in to your Okta account, then navigate to Applications and click the Add Application button
  • Select Web and click Next
  • Give your application a name (e.g. "GraphQL Express")
  • Change the Base URI to http://localhost:4000/ and the Login redirect URI to http://localhost:4000/implicit/callback, then click Done
  • Save your Client ID and Client Secret for later

Your Okta application should have settings similar to the following:

Okta Application Settings

You will also need to create an API token in Okta:

  • Log in to your Okta account, then navigate to API > Tokens and click the Create Token button
  • Enter a name that will help you remember what this is used for (e.g. "GraphQL Express")
  • Save the provided token value for later
    • This will only be displayed once. If you lose it, you will need to create another API token

Now create a file called .env in the project root and add the following variables, replacing the values with your own from the previous steps.

.env

HOST_URL=http://localhost:4000
OKTA_ORG_URL=https://{yourOktaOrgUrl}
OKTA_CLIENT_ID={yourClientId}
OKTA_CLIENT_SECRET={yourClientSecret}
OKTA_TOKEN={yourOktaToken}

You also need an app secret. One way to get a random APP_SECRET is to use the following commands, which will generate a random value and add it to your .env file.

npm install -g uuid-cli
echo "APP_SECRET=`uuid`" >> .env

Now you can run the GraphQL server with the following command:

npm start

Usage

Once you're up and running, you can get a nice user interface with built-in documentation by going to the GraphQL Playground and entering in http://localhost:4000/graphql. Queries shouldn't require authentication, but if you want to run a mutation you'll need to authenticate first.

Authenticating

Go to http://localhost:4000/access-token. This should prompt you to log in to your Okta developer account if you haven't already. Once you're authenticated, the page should give you an access token that will look something like eyJraW...j5gsJQ, only much longer.

In the GraphQL Playground, click on HTTP HEADERS, then modify it to include an authorization header with your token. It should look like this:

{
  "authorization": "Bearer eyJraW...j5gsJQ"
}

Note: Again, the real token will be much longer. Just copy and paste it from the previous page.

Example Queries

Here are some examples to get you started. Feel free to play around with them and get creative.

Get all posts and their authors
query {
  posts {
    id
    author {
      id
      firstName
      lastName
    }
    body
  }
}
Get a single post, its author, and all that author's posts
query {
  post(id: 2) {
    id
    author {
      firstName
      posts {
        id
        body
      }
    }
    body
  }
}
Create a new post, returning info about it and yourself
mutation {
  submitPost(input: {
    body: "Hello, world!"
  }) {
    id
    body
    author {
      id
      firstName
      lastName
      posts {
        id
        body
      }
    }
  }
}

Links

This example uses the Okta Node SDK, the Okta JWT Verifier, and the Okta OIDC Middleware.

Help

Please raise an issue if you find a problem with the example application, or visit our Okta Developer Forums. You can also email [email protected] if would like to create a support ticket.

License

Apache 2.0, see LICENSE.

okta-express-graphql-example's People

Contributors

dependabot[bot] avatar imgbotapp avatar redbmk avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

okta-express-graphql-example's Issues

Shipped example does not work - problem with OIDC middleware

The messages from npm install on screen were as follows:

Johns-iMac:okta-express-graphql-example-master a03pl$ npm install

[email protected] install /Users/a03pl/Sites/Tutorials/GraphQL/okta-express-graphql-example-master/node_modules/fsevents
node install

[fsevents] Success: "/Users/a03pl/Sites/Tutorials/GraphQL/okta-express-graphql-example-master/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile

[email protected] postinstall /Users/a03pl/Sites/Tutorials/GraphQL/okta-express-graphql-example-master/node_modules/nodemon
node bin/postinstall || exit 0

npm WARN [email protected] No repository field.
npm WARN [email protected] license should be a valid SPDX license expression

added 716 packages from 485 contributors and audited 3214 packages in 22.179s
found 1 low severity vulnerability
run npm audit fix to fix them, or npm audit for details
Johns-iMac:okta-express-graphql-example-master a03pl$

Messages from npm start thereafter were:

Johns-iMac:okta-express-graphql-example-master a03pl$ npm start

[email protected] start /Users/a03pl/Sites/Tutorials/GraphQL/okta-express-graphql-example-master
nodemon .

[nodemon] 1.18.4
[nodemon] to restart at any time, enter rs
[nodemon] watching: .
[nodemon] starting node .
Running a GraphQL API server at localhost:4000/graphql
(node:43310) UnhandledPromiseRejectionWarning: HTTPError: Response code 405 (Method Not Allowed)
at stream.catch.then.data (/Users/a03pl/Sites/Tutorials/GraphQL/okta-express-graphql-example-master/node_modules/openid-client/node_modules/got/index.js:386:13)
at
at process._tickCallback (internal/process/next_tick.js:188:7)
(node:43310) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:43310) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

and then visiting http://localhost:4000/access-token give the following in-browser failure message:

Error: Unknown authentication strategy "oidc"
at attempt (/Users/a03pl/Sites/Tutorials/GraphQL/okta-express-graphql-example-master/node_modules/passport/lib/middleware/authenticate.js:173:37)
at authenticate (/Users/a03pl/Sites/Tutorials/GraphQL/okta-express-graphql-example-master/node_modules/passport/lib/middleware/authenticate.js:349:7)
at /Users/a03pl/Sites/Tutorials/GraphQL/okta-express-graphql-example-master/node_modules/@okta/oidc-middleware/src/connectUtil.js:79:28
at Layer.handle [as handle_request] (/Users/a03pl/Sites/Tutorials/GraphQL/okta-express-graphql-example-master/node_modules/express/lib/router/layer.js:95:5)
at trim_prefix (/Users/a03pl/Sites/Tutorials/GraphQL/okta-express-graphql-example-master/node_modules/express/lib/router/index.js:317:13)
at /Users/a03pl/Sites/Tutorials/GraphQL/okta-express-graphql-example-master/node_modules/express/lib/router/index.js:284:7
at Function.process_params (/Users/a03pl/Sites/Tutorials/GraphQL/okta-express-graphql-example-master/node_modules/express/lib/router/index.js:335:12)
at next (/Users/a03pl/Sites/Tutorials/GraphQL/okta-express-graphql-example-master/node_modules/express/lib/router/index.js:275:10)
at urlencodedParser (/Users/a03pl/Sites/Tutorials/GraphQL/okta-express-graphql-example-master/node_modules/body-parser/lib/types/urlencoded.js:91:7)
at Layer.handle [as handle_request] (/Users/a03pl/Sites/Tutorials/GraphQL/okta-express-graphql-example-master/node_modules/express/lib/router/layer.js:95:5)

I think this may relate to the @okta/oidc-sdk-nodejs installation as this appears not to exist (using npm search)

Can this be corrected please so the example can actually run?

I do have an OKTA developer account and the .env file has the correct credentials in it. I am running on MacOS Sierra on an iMac.

Blog typo

Hey Braden,

there seems to be a typo in the npm i command where you install @okta/oidc-middleware and so forth where you put in

@okta/oidc-sdk-nodejs

where from you package.json you meant to use

@okta/okta-sdk-nodejs

there. Hope it helps

Provide mutation query

Hey Braden,

thank you very much for this example. It really helped me to glue together different peaces I hadn't been able to use together. However, since typing the whole mutation query for the GraphQL playground I was wondering if you could add it to the readme or your blog. Thanks!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.