auth0-blog / redux-auth Goto Github PK

I'm getting this error in the below action:

// Logs the user out
export function logoutUser() {
  return dispatch => {
    localStorage.removeItem('id_token')
    dispatch(requestLogout())
    dispatch(receiveLogout())
  }
}

Anyone know why?

Hi,

So I'm getting my token on the actions.js page by doing this:

localStorage.setItem('id_token', JSON.stringify(user.token).replace(/\"/g, ""))

Then in Quotes.js, I've got some custom code (with a fetch).

However, the Quotes.js seems to get called even before the user is logged in. This creates a problem as my 'fetch` requires the token that is created at the login page.

The only way I can get it working is to refresh the page.

Is there a way around this?

I tried adding react-router but this didn't help.

Here's a sample of Quotes.js

componentWillMount () {
    return fetch(DATA_API, 
      {
      headers: {
        'Authorization': 'JWT  ' + localStorage.getItem('id_token'),
        'Content-Type': 'application/json'}
      }
      )
      .then((response) => response.json())
      .then((json) => {
        this.setState({testapi: json, uniqueCategories: this.getUniqueCategories(json) })
      })
    },

I am just wondering why

I think that the current example is not working anymore. I am currently using v 10.6.1. And for redux, react, and auth0 working together I did some change to the login function in action.js.
First you have to set redirect:falsewhen declaring Auth0Lock. If you are not doing it the page will be refreshed and your async function will never be called.
Then you need to use lock.on to get event from Auth0Lock and calling your actions. Below a short example.

export function login() {
	console.log("login()")
  const lock = new Auth0Lock('xx', 'xx.eu.auth0.com',{auth:{redirect:false}});
  return dispatch => {
  	lock.show()
  	lock.on('authenticated', function(authResult){
  		localStorage.setItem('idToken', authResult.idToken);
  		dispatch(lockSuccess(authResult.profile, authResult.token))
  	})
  }
}

What do you think?

Hi!

Thanks for the great demo! I'm curious as to requestType never appears to be used (on line 74) of api. Shouldn't an "I'm fetching" action be called for the get quotes action? it looks like it's only fired for the login sequence.

thanks
@purcebr

It seems that all of Auth0's examples with Flux or Redux resort to assuming a custom JWT provider, which I find bizarre given that they have their Lock product. Why is that? It would be really great if these examples showed how Lock could work with Redux. In my attempts, they seem to be at odds (since Lock works with a roundabout callbackURL), but surely something is possible.

Hi,

Looks like a great repo.

I have this connected to a server which generates a JWT. The URL response simply contains:
{"token":"123242"}

Ideally I could export const and use the token to send with headers elsewhere in my app.

However, in actions.js my console.log just returns undefined

        else {
          localStorage.setItem('id_token', user.id_token)
          console.log('The user token is' + user.id_token)
          dispatch(receiveLogin(user))
        }

I also checked in my local storage (in chrome) and it says it is undefined there too.

How is it possible to access the token and store it for later use?

Enhancement would be to have a working react native project that uses Lock. Also that shows a integration with Firebase and/or Parse.

Hey guys!

Explain please. Why we use separate fetch instead of using our api middleware?

Hello,

What the point to set isAuthenticated & isFetching in your Actions ?

For example:

function requestLogin(creds) {
  return {
    type: LOGIN_REQUEST,
    isFetching: true,
    isAuthenticated: false,
    creds
  }
}

In the action, isFetching & isAuthenticated are set, but not used. This is the role of the reducer. Your action could be simplify to:

function requestLogin(creds) {
  return {
    type: LOGIN_REQUEST,
    creds
  }
}

or am I missing something ?

I am using React-Redux starter kit & trying to implement only Login Authentication.
In the App page: I am getting error. 'login' defined but never used & same error for 'loginUser' action.

Even I am getting error:
Uncaught TypeError: Cannot read property 'isAuthenticated' of undefined

This is my code:

import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux'
import Navbar from './Navbar'
import Login from './Login'
import { loginUser } from './redux/module/action'

class App extends Component {
render () {
const { dispatch, isAuthenticated, errorMessage } = this.props
return (

App.propTypes = {
dispatch: PropTypes.func.isRequired,
isAuthenticated: PropTypes.bool.isRequired,
errorMessage: PropTypes.string
}

function mapStateToProps (state) {
const{ auth } = state
const { isAuthenticated, errorMessage } = auth

return {
isAuthenticated,
errorMessage
}
}

export default connect(mapStateToProps)(App)

localStorage can be accessed by JS, How to prevent XSS attacks?

Curious - what's the purpose of the bracket here:
https://github.com/auth0-blog/redux-auth/blob/master/actions.js#L112

thanks!
Bryan

can u suggest how to use react-router with this flow .

thanks & Regards
G M Chaturvedi

Action creators are just pure functions but what did you add isFetching: true, isAuthenticated: true inside action creators?

There are some issues with your Logout reducers:

case LOGOUT_SUCCESS:
      return Object.assign({}, state, {
        isFetching: true,
        isAuthenticated: false
      })

In case of success, isFetching shall be set to false.

Moreover, LOGOUT_REQUEST is missing.

Given:

function requestLogin(creds) {
  return {
    type: LOGIN_REQUEST,
    isFetching: true,
    isAuthenticated: false,
    creds
  }
}

and:

case LOGIN_REQUEST:
      return Object.assign({}, state, {
        isFetching: true,
        isAuthenticated: false,
        creds: action.creds
      })

Isn't it simpler to just have the action defined as:

function requestLogin(creds) {
  return {
    type: LOGIN_REQUEST,
    creds
  }
}

Since the isFetching and isAuthenticated params on the action are ignored? This had me wondering what the point was and why all the duplication. The other option is to do:

case LOGIN_REQUEST:
      return Object.assign({}, state, action)

...and just treat the action params as new state (except that would put the "type" property into state). But, the way it is in the repo is confusing. This goes for all of the actions, this was just a simple example. It'll help simplify the code to remove code that is ignored.