@reshuffle/react-auth

React provider for working with Reshuffle authentication

This version of Reshuffle is being replaced with our new scripting platform for business workflows & integration. Thanks!
Last updated a year ago by binaris .
MIT · Original npm · Tarball · package.json
$ cnpm install @reshuffle/react-auth 
SYNC missed versions from official npm registry.

@reshuffle/react-auth

React context for adding "out-of-the-box" auth to your app using @reshuffle/passport.

See a fully working demo here.

Installation

$ npm install @reshuffle/react-auth

Prerequisites

  • Install @reshuffle/passport
  • Configure backend/_handler.js to use @reshuffle/passport, see instructions

Usage

Wrap your root component with AuthProvider.

src/App.js

import React from 'react';
import { AuthProvider } from '@reshuffle/react-auth';
import Main from './components/Main';

export default function App() {
  return (
    <AuthProvider>
      <Main />
    </AuthProvider>
  );
}

Use with react hooks.

src/components/Main

import React from 'react';
import { useAuth } from '@reshuffle/react-auth';

export default function Main() {
  const {
    loading,
    error,
    authenticated,
    profile,
    getLoginURL,
    getLogoutURL,
  } = useAuth();

  if (loading) {
    return <div><h2>Loading...</h2></div>;
  }
  if (error) {
    return <div className='error'><h1>{error.toString()}</h1></div>;
  }
  if (!authenticated) {
    return <a href={getLoginURL()}>Login</a>;
  }
  return (
    <>
      <img src={profile.picture} />
      <span>{profile.displayName}</span>
      <a href={getLogoutURL()}>Logout</a>
    </>
  );
}

Use with react class components.

src/components/Main

import React from 'react';
import { AuthContext } from '@reshuffle/react-auth';

export default class Main extends React.Component {
  static contextType = AuthContext;

  render() {
    const {
      loading,
      error,
      authenticated,
      profile,
      getLoginURL,
      getLogoutURL,
    } = this.context;

    if (loading) {
      return <div><h2>Loading...</h2></div>;
    }
    if (error) {
      return <div className='error'><h1>{error.toString()}</h1></div>;
    }
    if (!authenticated) {
      return <a href={getLoginURL()}>Login</a>;
    }
    return (
      <>
        <img src={profile.picture} />
        <span>{profile.displayName}</span>
        <a href={getLogoutURL()}>Logout</a>
      </>
    );
  }
}

Current Tags

  • 0.1.7                                ...           latest (a year ago)
  • 0.1.7                                ...           next (a year ago)

7 Versions

  • 0.1.7 [deprecated]           ...           a year ago
  • 0.1.6 [deprecated]           ...           a year ago
  • 0.1.5 [deprecated]           ...           a year ago
  • 0.1.4 [deprecated]           ...           a year ago
  • 0.1.3 [deprecated]           ...           a year ago
  • 0.1.2 [deprecated]           ...           a year ago
  • 0.1.1 [deprecated]           ...           a year ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (2)
Dev Dependencies (4)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |