apollo-passportjs-react

apollo-passport-react

React UI for apollo-passport.

Copyright (c) 2017 by Gilad Shoham & Gadi Cohen, released under the MIT license.

IMPORTANT NOTICE

This package is named apollo-passportjs-react (instead of apollo-passport-react) in the npm. I did this in order to be able to release it to npm. The original author is not responding so i can't use the original name.

This fork created in order to use my fork of apollo-passport.

Usage

Install apollo-passportjs.

Install and setup this package:

$ npm i --save apollo-passportjs-react

import { LoginButtons } from 'apollo-passportjs-react';
import 'apollo-passportjs-react/style/meteor.less';
 
// Wherever you export your apolloPassport instance from...
// Note, not necessary if using "Option 2" (ApolloPassportProvider) below.
import { apolloPassport } from '../../../lib/apollo';
 
// apolloPassport prop can be ommitted when using "Option 2" below.
const SomewhereInMyApp = () => (
  <LoginButtons apolloPassport={apolloPassport} />
);

That's it!

Getting auth property in other components

Option 1: With Redux (recommended if you use Redux)

If you use Redux, this is the recommended method. You need to have setup apollo-passport to use Redux too (see the README there). Example, pass userId as a prop to your component.

import { connect } from 'react-redux';
 
const MyComponent = () => ( <div>etc</div> );
 
const MyComponentWithData = connect(
  ({ auth }) => ({ userId: auth.data.userId })
)(MyComponent);

Option 2: Without Redux (your only choice if you don't use Redux)

If you don't use Redux, you need to wrap your main app with an ApolloPassportProvider just like with apollo-react.

Step 1: Use ApolloPassportProvider near the root of your tree (done for you already when using the Meteor integration):

import ApolloClient from 'apollo-client';
import { ApolloProvider } from 'react-apollo';
import ApolloPassportProvider from 'apollo-passportjs-react/lib/provider';
 
// Wherever you export your apolloPassport instance from...
// Note, not necessary if using "Option 2" (ApolloPassportProvider) below.
import { apolloPassport } from '../../../lib/apollo';
 
const client = new ApolloClient();
 
ReactDOM.render(
  <ApolloProvider client={client}>
    <ApolloPassportProvider apolloPassport={apolloPassport}>
      <MyRootComponent />
    </ApolloPassportProvider>
  </ApolloProvider>,
  rootEl
);

Step 2: to get the auth state, or parts of it, use the connect-like function from the library:

import apConnect from 'apollo-passportjs-react/lib/connect';
 
const MyComponent = () => ( <div>etc</div> );
 
const MyComponentWithData = apConnect(
  ({ auth }) => ({ userId: auth.data.userId })
)(MyComponent);

Note: although it seems superfluous to provide an { auth: { ...data } } formed object, when it's obvious you want auth, we purposefully retain the same format you'd get from a Redux state store, to make it easy to switch between both options.

Get Involved!

Hopefully you saw the IN DEVELOPMENT section of the apollo-passport README.

Open issues sorted by thumbs-up.

Out of all of the apollo-passport-xxx packages, this is the least developed. I'd love for someone else to be lead-maintaner for this package. See also open issues (especially those marked as help-wanted) to see how you can help! And the CONTRIBUTING.md file for design guidelines.

Custom CSS

Override as desired. We'd love contributions for different frameworks (bootstrap, material-ui), etc. Our preference is for you to simply provide alternative CSS with the existing structure, as that is a lot more maintainable. But you can create a new package using your own structure if desired.

Credits

Most of the markup (and of course the Meteor theme) was directly copied from the Meteor Accounts system, from which the entire Apollo Passport project draws most of it's inspiration. Meteor is Copyrighted by the Meteor Development Group (MDG) who have likewise licensed the code under the same MIT license that we use.