https://github.com/hex22a/jwt-react-tools

Toolkit that makes you happy using React and JWT
https://github.com/hex22a/jwt-react-tools

Last synced: 5 months ago
JSON representation

Toolkit that makes you happy using React and JWT

• Host: GitHub
• URL: https://github.com/hex22a/jwt-react-tools
• Owner: hex22a
• License: mit
• Created: 2017-05-12T04:38:56.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2024-09-06T05:50:02.000Z (almost 2 years ago)
• Last Synced: 2025-08-15T23:36:31.702Z (11 months ago)
• Language: JavaScript
• Size: 153 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# JWT React Tools

[![Build Status](https://travis-ci.org/hex22a/jwt-react-tools.svg?branch=master)](https://travis-ci.org/hex22a/jwt-react-tools)

[![Coverage Status](https://coveralls.io/repos/github/hex22a/jwt-react-tools/badge.svg?branch=master)](https://coveralls.io/github/hex22a/jwt-react-tools?branch=master)

React HOC to make usage of JWT extremely fun

## Installation

`yarn add jwt-xhr-hook` 

or `npm i --save jwt-xhr-hook` if you are still using npm

## Usage

This package provides a decorator to add isAuthenticated flag and jwtPayload inside component's props and child context

```javascript

import React, { Component, PropTypes } from 'react';

import JWT from 'jwt-react-tools';

@JWT()

class Main extends Component {

  render() {

    return (

      
foo

    );

  }

}


```

This will provide isAuthenticated flag and jwtPayload object from token stored in Local Storage by key 'jwt'. If you want to load JWT from another key pass key name through argument.

```javascript

import React, { Component, PropTypes } from 'react';

import JWT from 'jwt-react-tools';

@JWT('customKey')

class Main extends Component {

  render() {

    return (

      
foo

    );

  }

}


```

Access data inside child context

```javascript

import React, { PropTypes } from 'react';

const Menu = (props, { isAuthenticated, jwtPayload }) => (

  

    


      


        JWT

      

      {isAuthenticated &&

      


        {jwtPayload.sub}

      

      }

      {isAuthenticated &&

      


        Users

      

      }

      


        GitHub

      

      {!isAuthenticated &&

      


        Sign In

      

      }

      {!isAuthenticated &&

      


        Sign Up

      

      }

      {isAuthenticated &&

      


        Logout

      

      }

    

  

);


Menu.contextTypes = {

  isAuthenticated: PropTypes.bool,

  jwtPayload: PropTypes.object,

};

```

## Contributing

PR's are welcome 👍

## Credits

Maintained by [Albert Fazullin](http://github.com/AlbertFazullin), [hex22a](http://github.com/hex22a)

Twitter: [@hex22a](https://twitter.com/hex22a)