npm

npm’s 2019 JavaScript ecosystem survey analysis is now available!Get your copy here »

react-native-cross-cognito

0.3.2 • Public • Published

Crossplatform

Crossplatform React-Native Cognito

React-Native implementation of AWS Cognito and Amplify SDK including login screens

Show me Components!

Install

This package makes use of our react-native-cross-components that are based on on react-native-paper. Paper which is therefore a peer dependency.

Native

Install with aws amplify and link it.

    npm i react-native-vector-icons
    npm i aws-amplify
    npm i react-native-paper
    npm i react-native-cross-cognito
 
    # one liner 
    npm i react-native-vector-icons aws-amplify react-native-paper react-native-cross-cognito
    yarn add react-native-vector-icons
    yarn add aws-amplify
    yarn add react-native-paper
    yarn add react-native-cross-cognito
 
    # one liner 
    yarn add react-native-vector-icons aws-amplify react-native-paper react-native-cross-cognito

Expo prev CRNA

    npm i react-native-cross-cognito
    yarn add react-native-cross-cognito

Documentation

See our GitHub Pages generated from code comments. This documentation is also available as intellisense / auto complete.

See Components below for examples


npm npm Build status GitHub

codecov dependencies peer dependencies Prettier

aws-amplify react-native-cross-components

GitHub forks GitHub stars GitHub watchers Twitter Follow

Table of Contents

Table of contents generated with markdown-toc

Services and helpers

GetJwtToken

Gets the current user's Jwt token from AWS Cognito.

For documentation see API reference - GetJwtToken.

import { GetJwtToken } from 'react-native-cross-cognito';
 
const myToken = await GetJwtToken();

Components

CognitoLogin

Renders a complete login form using your Amplify token.

For properties and documentation, see API reference - Class CognitoLogin.

Examples

With success callback

    import { CognitoLogin } from 'react-native-cross-cognito';
    import amplify from './aws-exports';
 
    Amplify.configure(amplify);
 
    export const MyComp => () => (
        <CognitoLogin
            onRegisteredUser={(user) => {
                Alert.alert('Registration complete', 'Thank you ' + user.getUsername());
            }}
            onLoggedIn={(user) => {
                Alert.alert('Logged in', 'Welcome ' + user.getUsername()); }} />
    );

Set initial form

    import { CognitoLogin } from 'react-native-cross-cognito';
    import amplify from './aws-exports';
 
    Amplify.configure(amplify);
 
    export const MyComp => () => (
        <CognitoLogin activeForm='Register' />
    );

With button customizations

    import { CognitoLogin } from 'react-native-cross-cognito';
    import amplify from './aws-exports';
 
    Amplify.configure(amplify);
 
    export const MyComp => () => (
        <CognitoLogin
          buttonProps={{ mode: 'text' }}
          loginButtonProps={{ mode: 'contained', title: 'ENGAGE!' }}
          />
    );

With custom children

    import { CognitoLogin } from 'react-native-cross-cognito';
    import amplify from './aws-exports';
 
    Amplify.configure(amplify);
 
    export const MyComp => () => (
        <CognitoLogin
          registerChildren={
            <Text
              style={{
                color: 'blue',
                fontWeight: 'bold',
                margin: 10,
                fontSize: 16,
              }}
            >
              &lt;ENLIST NOW&gt;
            </Text>
          }
        >
          <Text
            style={{
              color: 'red',
              fontWeight: 'bold',
              margin: 10,
              fontSize: 16,
            }}
          >
            * &lt;WARNINGRESTRICTED AREA&gt; :)
          </Text>
        </CognitoLogin>
    );

install

npm i react-native-cross-cognito

Downloadsweekly downloads

287

version

0.3.2

license

ISC

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability