Git Product home page Git Product logo

ra-in-memory-jwt's Introduction

ra-in-memory-jwt

GitHub top language GitHub contributors ra-in-memory-jwt.svg PRs Welcome npm

Probably by routine or by Stack Overflow syndrome, we often use a JSON Web Token(JWT) to manage this authentication between our frontend apps and their API. For convenience, we store this token in the browser's localStorage. But this is not a good practice, as Randall Degges explains in his article "Please Stop Using Local Storage". For the most curious, here is an example of how "Stealing JWTs in localStorage via XSS".

But then, how to use a JWT to manage authentication in a more secure way? ra-in-memory-jwt is an implementation of a solution proposed by the Hasura team in their article The Ultimate Guide to handling JWTs on frontend clients.

You can find a detailed explanation of this implementation on the blog post Handling JWT in Admin Apps the Right Way.

Installation

From npm

npm install ra-in-memory-jwt

From scratch

The use of ra-in-memory-jwt is strongly linked to your API. Rather than using the npm package and the configuration options (see next part), you will probably save time to recreate the innMemoryJWT.js file from the original file. And it will be one less dependency for your project!

Configuration

ra-in-memory-jwt must know the API endpoints to refresh the JWT. The default value is /refresh-token, but you can change it with the setRefreshTokenEndpoint method:

inMemoryJWT.setRefreshTokenEndpoint('http://localhost:8001/another/refresh-token-endpoint');

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

To learn more about the contributions to this project, consult the contribution guide.

Maintainer

alexisjanvier
Alexis Janvier

License

ra-in-memory-jwt is licensed under the MIT License, courtesy of Marmelab.

ra-in-memory-jwt's People

Contributors

alexisjanvier avatar dependabot[bot] avatar fzaninotto avatar

Stargazers

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

Watchers

 avatar  avatar  avatar

ra-in-memory-jwt's Issues

RA will logout if custom page is opened

I am currently at a complete loss. I have tried all I can think of and am stuck on one particular issue.

So far, the JWT memory function is working perfectly for any Resource in the app, such as:
<Admin dataProvider={dataProvider} authProvider={authProvider} loginPage={LoginPage}> <Resource name="users" list={ListGuesser} /> </Admin>

However, if I add a dashboard page such as:

`
import * as React from "react";
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';

import { Title } from 'react-admin';

const Dashboard = () => {

return(
    
    <Card>
        <Title title="Welcome to the administration" />
        <CardContent>Lorem ipsum sic dolor amet...</CardContent>
    </Card>
    

);

}

export default Dashboard;`

and include it to the admin:
<Admin dashboard={Dashboard} dataProvider={TrueIMSDataProvider} authProvider={TrueIMSAuthProvider} loginPage={LoginPage}> <Resource name="companies" list={ListGuesser} /> </Admin>

RA will logout if you refresh the page while on the dashboard without error.
I believe the checkAuth it called, which in turns calls the logout function, however, I have no idea why.

Any help would be GREATLY appreciated

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.