isotoma / react-cognito Goto Github PK
View Code? Open in Web Editor NEWLibrary for integrating Facebook React and Amazon Cognito
License: Apache License 2.0
Library for integrating Facebook React and Amazon Cognito
License: Apache License 2.0
I'm having to modify policy.js or recreate setupCognito if I want a different behavior. I'd like to be able to pass in the features to enable in an array.
const setupCognito = (store, config) => {
store.dispatch(Action.configure(config));
enable(store, direct);
//enable(store, emailVerificationRequired);
enable(store, identityPoolLogin);
};
Guarded routes are validated by checking:
state.cognito.user !== null
However Dashboard on example app depends on:
state.cognito.state = CognitoState.LOGGED_IN
If a user logs in, the session data and user is saved in local storage.
If the browser is closed and reopened, on entering the app, COGNITO_CONFIGURE action is fired which has the following code:
const configure = (state, action) => {
// surprise side-effect!
AWSCognito.config.region = action.config.region;
const pool = new CognitoUserPool({
UserPoolId: action.config.userPool,
ClientId: action.config.clientId,
});
const user = pool.getCurrentUser();
return Object.assign({}, state, {
config: action.config,
userPool: pool,
user,
});
};
When calling const user = pool.getCurrentUser();
cognito recovers the user from local storage, turning state.cognito.user !== null
however, state.cognito.state
is not updated to CognitoState.LOGGED_IN
which turns the app on an undesired state:
On one side, the user is presented the Login Form as if it was not logged-in, because state.cognito.state !== CognitoState.LOGGED_IN
By the other side, the user CAN access guarded routes since state.cognito.user !== null
I think CognitoState should be updated accordingly if const user = pool.getCurrentUser();
has a valid user/session, or else what solution do you suggest to handle these states?
If you dispatch multiple actions when cognito.state is LOGGING_IN, performLogin
is going to be called a number of times equal to the number of actions dispatched.
This happens because the enable
function is subscribed to the store and it runs every time an action is dispatched. The, identityPoolLogin
is going to be called multiple times and the validation state.cognito.state === CognitoState.LOGGING_IN
can be true for a few milliseconds, thus performing login multiple times
Hi all, sorta new to this whole game here. My project has react and react-dom at 16.0.0 but this package seems to specify 15.0.0
https://github.com/isotoma/react-cognito/blob/master/package.json
When I try to install this on my project, I get:
$ npm install react-cognito -s
[email protected] /Users/me/Development/app/react/app-web
├── UNMET PEER DEPENDENCY [email protected]
├── [email protected]
└── UNMET PEER DEPENDENCY [email protected]
Is 16.0.0 supported? and what's the proper way to resolve this?
Thanks!
Issue
setupCognito
doesn't seem to play nicely with Redux's applyMiddleware
, resulting in a Redux state mutation error.
Steps to reproduce:
applyMiddleware
from redux
.createStore
, passing a call to applyMiddleware
(which can be passed any middleware).setupCognito
.Symptom
This results in the following error:
Uncaught Error: A state mutation was detected between dispatches, in the path
cognito.userPool.client.api.operations.addCustomAttributes.input.defaultValue
. This may cause incorrect behavior. (http://redux.js.org/docs/Troubleshooting.html#never-mutate-reducer-arguments)
at invariant (browser.js:40)
at index.js:53
at Object.dispatch (index.js:14)
at setupCognito (react-cognito.js:1191)
at index.js:16
The error seems triggered by the call to setupCognito
.
I'm having trouble with stale auth tokens. I'm sending the signInUserSession.idToken.jwtToken
as an Authorization header in all of my fetch requests, but it appears that the token expires fairly quickly and is only refreshed on page reload. This is an issue when the webapp is left open and idle and then a fetch request is made without reloading the page.
Is there something I've missed in the setup, or some function I've overlooked that will refresh the token? I didn't see anything about this in the docs. If anyone could offer up any solutions or insight it would be greatly appreciated.
Edit: Figured it out by checking out the amazon-cognito-identity-js
docs.
$ git clone [email protected]:isotoma/react-cognito
...
$ npm run examples
> [email protected] examples ./react-cognito
> babel --plugins transform-es2015-modules-umd src --ignore __tests__ examples/src --out-file examples/htdocs/dist/bundle.js
Error: ENOENT: no such file or directory, open 'examples/htdocs/dist/bundle.js'
at Object.fs.openSync (fs.js:557:18)
at Object.fs.writeFileSync (fs.js:1214:33)
at output ./react-cognito/node_modules/babel-cli/lib/babel/file.js:92:10)
at walk (./react-cognito/node_modules/babel-cli/lib/babel/file.js:154:5)
at files (./react-cognito/node_modules/babel-cli/lib/babel/file.js:160:7)
at module.exports ./react-cognito/node_modules/babel-cli/lib/babel/file.js:188:5)
at Object.<anonymous> (./react-cognito/node_modules/babel-cli/lib/babel/index.js:130:1)
at Module._compile (module.js:573:32)
at Object.Module._extensions..js (module.js:582:10)
at Module.load (module.js:490:32)
node 7.1.0, babel-cli 6.22.2 (babel-core 6.22.1)
Hi
I get this warning:
lowPriorityWarning.js:40 Warning: Accessing PropTypes via the main React package is deprecated, and will be removed in React v16.0. Use the latest available v15.* prop-types package from npm instead. For info on usage, compatibility, migration and more, see https://fb.me/prop-types-docs
I assume its just changing from:
import React, { PropTypes } from 'react';
to:
import React from 'react'; import PropTypes from 'prop-types';
I am using you example code, when I try to login a user that is already verified I get the following error "Insufficient privilege".
I can create new users and change password but not log in.
Why there is uncaught error in console when using wrong password?
bundle.js:16431 Uncaught (in promise) Error: Incorrect username or password. at Request.extractError (bundle.js:16431) at Request.callListeners (bundle.js:19408) at Request.emit (bundle.js:19380) at Request.emit (bundle.js:18017) at Request.transition (bundle.js:17356) at AcceptorStateMachine.runTo (bundle.js:22839) at bundle.js:22851 at Request.<anonymous> (bundle.js:17372) at Request.<anonymous> (bundle.js:18019) at Request.callListeners (bundle.js:19418) at Request.emit (bundle.js:19380) at Request.emit (bundle.js:18017) at Request.transition (bundle.js:17356) at AcceptorStateMachine.runTo (bundle.js:22839) at bundle.js:22851 at Request.<anonymous> (bundle.js:17372) at Request.<anonymous> (bundle.js:18019) at Request.callListeners (bundle.js:19418) at callNextListener (bundle.js:19398) at EventEmitter.onEnd (bundle.js:14556) at EventEmitter../node_modules/events/events.js.EventEmitter.emit (bundle.js:36627) at features.constructor.finishRequest (bundle.js:15196) at XMLHttpRequest.<anonymous> (bundle.js:15111)
Thanks
react-redux 6.0 removed the ability to access the store from legacy context. This library uses
const { store } = this.context;
const state = store.getState();
store is undefined
under version 6
Hello, I use react-cognito to work with auth state, and it is very useful, easy to use. Excellent! But I didn't find anything about auth via google/facebook. Do you plan to implement it?
What can you suggest for now to work with this? I could implement it with javascript sdk, provided by aws cognito documentation, but it is complicated because I am already have cognito reducer from react-cognito lib, and creating new one for managing state of autho via google/facebook. I don't like such splitting :(
Hi all,
Having trouble getting set up. When importing anything from react-cognito into my project I'm getting a "Require is not defined" error. Here are the steps I've taken to install:
npm install --save-dev react-cognito
npm install --save-dev amazon-cognito-identity-js
Am I missing anything here? Have just followed the docs at:
https://doc.esdoc.org/github.com/isotoma/react-cognito/manual/installation/install.html
Suppose I don't require email verification.
/**
How am I supposed to set non-default policy?
I updated config.json, then I ran:
npm run examples
Then tried to serve examples/htdocs via static http.
bundle.js:106 Uncaught TypeError: Cannot read property 'connect' of undefined
at bundle.js:106
at bundle.js:10
at bundle.js:13
After 1 hour (configurable in user pool) tokens expire yet CognitoState.LOGGED_IN
remains true.
This necessitates complicated logic in the app, i.e checking cognito.user.signInUserSession.idToken.payload.exp
at each PrivateRoute change and calls to private APIs, and subsequently attempting a refresh if the checks fail.
Would it be possible for react-cognito to auto-refresh tokens and update CognitoState if the refresh fails?
I'm new to front end development, so hopefully I'm not wasting anyones time with this.
When I add the following to my createStore and add middleware like below
import {createStore, applyMiddleware} from 'redux';
import rootReducer from '../reducers';
import reduxImmutableStateInvariant from 'redux-immutable-state-invariant';
import thunk from 'redux-thunk';
export default function configureStore(initialState) {
return createStore(
rootReducer,
initialState,
applyMiddleware(thunk, reduxImmutableStateInvariant())
);
}
It causes the following error
Invariant Violation: A state mutation was detected between dispatches, in the path
cognito.user.pool.client.api.operations.addCustomAttributes.input.defaultValue
. This may cause incorrect behavior. (http://redux.js.org/docs/Troubleshooting.html#never-mutate-reducer-arguments)
Is this something I can ignore? the error disappears when I change applyMiddleware to
applyMiddleware(thunk)
ERROR in assets/app.js from UglifyJs
Unexpected token: operator (>) [../node_modules/react-cognito/src/actions.js:6,0][assets/app.js:55718,21]
My compile is balking thusly when installing react-cognito from package.json/npm:
Module not found: 'aws-cognito-sdk' node_modules/react-cognito/dist
Does this module incorporate the federated identities capabilities of Cognito or just User Pools?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.