https://github.com/crossplatformsweden/react-native-cross-cognito
React-Native implementation of AWS Cognito and Amplify SDK including login screens
https://github.com/crossplatformsweden/react-native-cross-cognito
amplify authentication aws-amplify aws-amplify-react-native aws-cognito aws-cognito-react crossplatform javascript login react-native typescript
Last synced: 2 months ago
JSON representation
React-Native implementation of AWS Cognito and Amplify SDK including login screens
- Host: GitHub
- URL: https://github.com/crossplatformsweden/react-native-cross-cognito
- Owner: crossplatformsweden
- License: apache-2.0
- Created: 2018-12-06T15:02:37.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-02-01T14:33:13.000Z (over 6 years ago)
- Last Synced: 2025-03-18T13:11:27.460Z (3 months ago)
- Topics: amplify, authentication, aws-amplify, aws-amplify-react-native, aws-cognito, aws-cognito-react, crossplatform, javascript, login, react-native, typescript
- Language: TypeScript
- Homepage: https://aws.amazon.com/cognito/
- Size: 438 KB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: ReadMe.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.crossplatform.se/)
# Crossplatform React-Native Cognito
React-Native implementation of [AWS Cognito](https://aws.amazon.com/cognito/) and [Amplify SDK](https://aws-amplify.github.io/docs/js/start?ref=amplify-rn-btn&platform=react-native#step-4-integrate-aws-resources) including login screens
## [Show me Components!](#components)
## Install
This package makes use of our **[react-native-cross-components](https://github.com/crossplatformsweden/react-native-components)** that are based on on `react-native-paper`. Paper which is therefore a peer dependency.
### Native
Install with [aws amplify](https://aws-amplify.github.io/docs/js/tutorials/building-react-native-apps/) and link it.
```bash
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
```
```bash
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
```bash
npm i react-native-cross-cognito
```
```bash
yarn add react-native-cross-cognito
```
## Documentation
See our GitHub Pages generated from code comments. This documentation is also available as intellisense / auto complete.
- **[API Documentation](https://crossplatformsweden.github.io/react-native-cross-cognito/)**
See **[Components](#components)** below for examples
---
[](https://www.npmjs.com/package/react-native-cross-cognito) [](https://www.npmjs.com/package/react-native-cross-cognito) [](https://crossplatformsweden.visualstudio.com/ParkeraApp/_build/latest?definitionId=16) 
[](https://codecov.io/gh/crossplatformsweden/react-native-cross-cognito) [](https://david-dm.org/crossplatformsweden/react-native-cross-cognito) [](https://github.com/crossplatformsweden/react-native-cross-cognito) [](https://github.com/prettier/prettier)
[](https://github.com/aws-amplify/amplify-js) [](https://github.com/crossplatformsweden/react-native-components)
[](https://github.com/crossplatformsweden/react-native-cross-cognito)
[](https://github.com/crossplatformsweden/react-native-cross-cognito) [](https://github.com/crossplatformsweden/react-native-cross-cognito) [](https://twitter.com/crossplatformse)
## Table of Contents
- [Install](#install)
- [Native](#native)
- [Expo prev CRNA](#expo-prev-crna)
- [Documentation](#documentation)
- [Services and helpers](#services-and-helpers)
- [GetJwtToken](#getjwttoken)
- [Components](#components)
- [CognitoLogin](#cognitologin)
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](https://crossplatformsweden.github.io/react-native-cross-cognito/modules/_jwt_getjwttoken_.html)**.
```typescript
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](https://crossplatformsweden.github.io/react-native-cross-cognito/classes/_login_components_cognitologin_.cognitologin.html)**.
**Examples**
With success callback
```typescript
import { CognitoLogin } from 'react-native-cross-cognito';
import amplify from './aws-exports';
Amplify.configure(amplify);
export const MyComp => () => (
{
Alert.alert('Registration complete', 'Thank you ' + user.getUsername());
}}
onLoggedIn={(user) => {
Alert.alert('Logged in', 'Welcome ' + user.getUsername()); }} />
);
```
Set initial form
```typescript
import { CognitoLogin } from 'react-native-cross-cognito';
import amplify from './aws-exports';
Amplify.configure(amplify);
export const MyComp => () => (
);
```
With button customizations
```typescript
import { CognitoLogin } from 'react-native-cross-cognito';
import amplify from './aws-exports';
Amplify.configure(amplify);
export const MyComp => () => (
);
```
With custom children
```typescript
import { CognitoLogin } from 'react-native-cross-cognito';
import amplify from './aws-exports';
Amplify.configure(amplify);
export const MyComp => () => (
<ENLIST NOW>
}
>
* <WARNING: RESTRICTED AREA> :)
);
```