aws-amplify-react-bootstrap v0.0.3

Included Resources

Currently this just implements the authentication system. As time progresses and I have more time to add features or need them for other projects, I will add them. This is using the basic Bootstrap Theme but any theme that is build off of Bootstrap (and uses Bootstrap components) should work.

Thanks To

Most of this is based off the work of React Bootstrap and AWS Amplify. Without them, this wouldn't even exist.

Installation

NPM

npm install aws-amplify-react-bootstrap --save

Yarn

yarn add aws-amplify-react-bootstrap

Options

Custom Icons can be implemented by passing an icon object to each component

const icons = {
	code: (<Glyphicon glyph="lock" />),
	email: (<Glyphicon glyph="envelope" />),
	password: (<Glyphicon glyph="lock" />),
	phone: (<Glyphicon glyph="phone" />),
	username: (<Glyphicon glyph="user" />),
};

...

<SignUp icons={icons} />

You can also remove the icons by passing noIcons to the component

<SignUp noIcons />

Usage

import {
	ConfirmSignIn,
	ConfirmSignUp,
	ForgotPassword,
	Greetings,
	RequireNewPassword,
	SignIn,
	SignUp,
	Theme,
	VerifyContact,
} from 'aws-amplify-react-bootstrap';
import Amplify from 'aws-amplify';
import App from './App';
import { Authenticator } from 'aws-amplify-react';
import React from 'react';
import awsExports from './../aws-exports';

Amplify.configure(awsExports);

const federated = {
	facebook: facebook_app_id,
	google: google_client_id,
};

const icons = {
	code: (<Glyphicon glyph="lock" />),
	email: (<Glyphicon glyph="envelope" />),
	password: (<Glyphicon glyph="lock" />),
	phone: (<Glyphicon glyph="phone" />),
	username: (<Glyphicon glyph="user" />),
};

const auth = () => (
	<Authenticator hideDefault={true} theme={Theme}>
		<Greetings />
		<SignIn federated={federated} icons={icons} />
		<ConfirmSignIn icons={icons} />
		<RequireNewPassword icons={icons} />
		<SignUp icons={icons} />
		<ConfirmSignUp icons={icons} />
		<ForgotPassword icons={icons} />
		<App />
	</Authenticator>
);

export default auth;

Screenshots

Basic Bootstrap Theme