Having trouble with configuration.

[moalamin]

Hello, my index.js file, the main part of my react application looks like this:

`import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import SignUp from './components/SignIn.js'
import Todos from './components/Todos.js';
import './index.css';
import { Router, Route, browserHistory, IndexRoute } from 'react-router';
import { syncHistoryWithStore } from 'react-router-redux';
import { Provider } from 'react-redux';
import { configure } from 'redux-auth';
import store from './stores/index.js';

store.dispatch(configure({
apiUrl: 'http://localhost:3000',
isServer: false,
cleanSession: true,
clientOnly: true
}))

const history = syncHistoryWithStore(browserHistory, store);

ReactDOM.render(







,
document.getElementById('root')
);`

However, when I do this, it seems as though whenever the application loads, an automatic actions get dispatched like this:

action @ 16:16:48.475 undefined core.js:112 prev state Object {auth: Map, userReducer: Object, routing: Object} core.js:116 action function (r){if(t.currentLocation&&t.currentLocation.match(/blank=true/))return Promise.resolve({blank:!0});r((0,l.authenticateStart)());var n=void 0,o=void 0,i=void 0,a=void 0,s=void 0;if(t.isServer)… core.js:124 next state Object {auth: Map, userReducer: Object, routing: Object} core.js:100 action @ 16:16:48.475 AUTHENTICATE_START core.js:112 prev state Object {auth: Map, userReducer: Object, routing: Object} core.js:116 action Object {type: "AUTHENTICATE_START"} core.js:124 next state Object {auth: Map, userReducer: Object, routing: Object} core.js:100 action @ 16:16:48.483 @@router/CALL_HISTORY_METHOD core.js:112 prev state Object {auth: Map, userReducer: Object, routing: Object} core.js:116 action Object {type: "@@router/CALL_HISTORY_METHOD", payload: Object} core.js:124 next state Object {auth: Map, userReducer: Object, routing: Object} core.js:100 action @ 16:16:48.490 SET_ENDPOINT_KEYS

Is this normal behavior? The subsequent sign up interactions I do work just fine, but I was just wondering if that's normal behavior or if I'm using the configuration in the wrong way. I think the ideal behavior should be something like whenever someone does something auth related, the configure action should be run first, then the server action follows, but I am new to react and am confused.

This ends up causing an error when the app first loads:

action @ 16:16:48.552 AUTHENTICATE_ERROR core.js:112 prev state Object {auth: Map, userReducer: Object, routing: Object} core.js:116 action Object {type: "AUTHENTICATE_ERROR", errors: Array[1]} core.js:124 next state Object {auth: Map, userReducer: Object, routing: Object}

This seems odd to me. Can someone please help me understand? Much appreciated!

[piersholt]

Hi @moalamin,

This is normal behaviour. configure() will dispatch multiple actions independently. This will invoke an attempt to load token headers that have been persisted to cookies (or local storage).

Your configuration cleanSession: true, does not allow persistence, so the token headers aren't available, causing a failure- as you've noted: AUTHENTICATE_ERROR . You'll note that you must log in again at this point.

If you change your configuration to cleanSession: false, the token headers will be persisted, and reloaded next time you run the app, at which point you should see AUTHENTICATE_COMPLETE, and you should still be logged in.