Coder Social home page Coder Social logo

kaiba42 / graphql-auth-directives Goto Github PK

View Code? Open in Web Editor NEW

This project forked from grand-stack/graphql-auth-directives

0.0 0.0 0.0 310 KB

Add authorization to your GraphQL API using schema directives.

Home Page: https://www.npmjs.com/package/graphql-auth-directives

Shell 2.93% JavaScript 97.07%

graphql-auth-directives's Introduction

graphql-auth-directives

CircleCI

Add authentication to your GraphQL API with schema directives.

Schema directives for authorization

  • @isAuthenticated
  • @hasRole
  • @hasScope

Quick start

npm install --save graphql-auth-directives

Then import the schema directives you'd like to use and attach them during your GraphQL schema construction. For example using neo4j-graphql.js' makeAugmentedSchema:

import { IsAuthenticatedDirective, HasRoleDirective, HasScopeDirective } from "graphql-auth-directives";

const augmentedSchema = makeAugmentedSchema({
  typeDefs,
  schemaDirectives: {
    isAuthenticated: IsAuthenticatedDirective,
    hasRole: HasRoleDirective,
    hasScope: HasScopeDirective
  }
});

The @hasRole, @hasScope, and @isAuthenticated directives will now be available for use in your GraphQL schema:

type Query {
    userById(userId: ID!): User @hasScope(scopes: ["User:Read"])
    itemById(itemId: ID!): Item @hasScope(scopes: ["Item:Read"])
}

Be sure to inject the request headers into the GraphQL resolver context. For example, with Apollo Server:

const server = new ApolloServer({
  schema,
  context: ({ req }) => {
    return req;
  }
});

A JWT must then be included in each GraphQL request in the Authorization header. For example, with Apollo Client:

import { createHttpLink } from 'apollo-link-http';
import { setContext } from 'apollo-link-context';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { ApolloClient } from 'apollo-client';


const httpLink = createHttpLink({
    uri: <YOUR_GRAPHQL_API_URI>
});

const authLink = setContext((_, { headers }) => {
    const token = localStorage.getItem('id_token'); // here we are storing the JWT in localStorage
    return {
        headers: {
            ...headers,
            authorization: token ? `Bearer ${token}` : "",
        }
    }
});

const client = new ApolloClient({
    link: authLink.concat(httpLink),
    cache: new InMemoryCache()
});

Configure

Configuration is done via environment variables.

(required) You must set the JWT_SECRET environment variable:

export JWT_SECRET=><YOUR_JWT_SECRET_KEY_HERE>

(optional) By default @hasRole will validate the roles, role, Roles, or Role claim (whichever is found first). You can override this by setting AUTH_DIRECTIVES_ROLE_KEY environment variable. For example, if your role claim is stored in the JWT like this

"https://grandstack.io/roles": [
    "admin"
]

Set:

export AUTH_DIRECTIVES_ROLE_KEY=https://grandstack.io/roles

Test JWTs

Scopes: user:CRUD

key: qwertyuiopasdfghjklzxcvbnm123456
eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJHUkFORHN0YWNrIiwiaWF0IjoxNTQ5MTQ1Mjk0LCJleHAiOjE1ODA2ODEzMDcsImF1ZCI6ImdyYW5kc3RhY2suaW8iLCJzdWIiOiJib2JAbG9ibGF3LmNvbSIsIlJvbGUiOiJBRE1JTiIsIlNjb3BlIjpbIlVzZXI6UmVhZCIsIlVzZXI6Q3JlYXRlIiwiVXNlcjpVcGRhdGUiLCJVc2VyOkRlbGV0ZSJdfQ.nKADki8iKTpKqq3CVdrGAUrSzSBmFolWzYOsA_ULSdo

graphql-auth-directives's People

Contributors

johnymontana avatar phylodome avatar dustinsmith1024 avatar kaiba696 avatar

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.