Wysłanie akcji na zdarzenie lock.on ('authenticated') Auth0

Question

Chcę zaimplementować nową blokadę Auth0 10 w mojej aplikacji React/Redux.

Sprawdziłem w Internecie, ale nic nie pasuje do mojego pytania. Jest tutorial here, ale używa trybu Popup zamiast trybu przekierowania (domyślnie teraz). Innym one analizuje URL, który jest bezużyteczny w Lock 10.

oto przepływ:

• Auth0Lock dostaje instancję kiedy moja aplikacja rozpoczyna
• Kiedy użytkownik kliknie przycisk logowania, to pokazuje Blokada widget (lock.show()) i wywołuje LOGIN_REQUEST
• Blokada robi swoje uwierzytelnienie na auth0.com (przekierowuje z moim localhost)
• Przekierowanie z powrotem do mojego localhost po udanym logowaniu Auth0Lock dostać instantia Ted ponownie
• czekam na zdarzenie lock.on('authenticated') wysyłką LOGIN_SUCCESS

I tu jest moje działania/code index.js:

import Auth0Lock from 'auth0-lock' 

export const LOGIN_REQUEST = 'LOGIN_REQUEST' 
export const LOGIN_SUCCESS = 'LOGIN_SUCCESS' 
export const LOGIN_ERROR = 'LOGIN_ERROR' 

function loginRequest() { 
    return { 
    type: LOGIN_REQUEST 
    } 
} 

function loginSuccess(profile) { 
    return { 
    type: LOGIN_SUCCESS, 
    profile 
    } 
} 

function loginError(error) { 
    return { 
    type: LOGIN_ERROR, 
    error 
    } 
} 

// import AuthService to deal with all the actions related to auth 
const lock = new Auth0Lock('secret', 'secret', { 
    auth: { 
    redirectUrl: 'http://localhost:3000/callback', 
    responseType: 'token' 
    } 
}) 

lock.on('authenticated', authResult => { 
    console.log('Im authenticated') 
    return dispatch => { 
    return dispatch(loginSuccess({})) 
    } 
}) 

lock.on('authorization_error', error => { 
    return dispatch => dispatch(loginError(error)) 
}) 


export function login() { 
    lock.show() 
    return dispatch => {return dispatch(loginRequest())} 
} 

Teraz po kliknięciu na przycisk logowania, Redux pokazy logger akcja LOGIN_REQUEST wysłana, widzę widżet blokady, mogę się zalogować, przekierowuje do auth0.com, a następnie z powrotem do mojego localhost:3000/callback z ładnym tokenem. Wszystko jest w porządku, widzę komunikat Im authenticated w mojej konsoli, ale program rejestrujący redux nie pokazuje mi, że akcja LOGIN_SUCCESS została wywołana.

Jestem nowy w Redux i chyba zgubiłem jedną rzecz, ale nie mogę się jej pozbyć. Dzięki!

Answer 1

końcu umieścić w środku actions.js, stworzyłem nową funkcję o nazwie checkLogin()

// actions.js 

const authService = new AuthService(process.env.AUTH0_CLIENT_ID, process.env.AUTH0_DOMAIN) 

// Listen to authenticated event from AuthService and get the profile of the user 
// Done on every page startup 
export function checkLogin() { 
    return (dispatch) => { 
    // Add callback for lock's `authenticated` event 
    authService.lock.on('authenticated', (authResult) => { 
     authService.lock.getProfile(authResult.idToken, (error, profile) => { 
     if (error) 
      return dispatch(loginError(error)) 
     AuthService.setToken(authResult.idToken) // static method 
     AuthService.setProfile(profile) // static method 
     return dispatch(loginSuccess(profile)) 
     }) 
    }) 
    // Add callback for lock's `authorization_error` event 
    authService.lock.on('authorization_error', (error) => dispatch(loginError(error))) 
    } 
} 

A w konstruktorze moim App komponentu, ja to nazywam

import React from 'react' 
import HeaderContainer from '../../containers/HeaderContainer' 

class App extends React.Component { 
    constructor(props) { 
    super(props) 
    this.props.checkLogin() // check is Auth0 lock is authenticating after login callback 
    } 

    render() { 
    return(
     <div> 
     <HeaderContainer /> 
     {this.props.children} 
     </div> 
    ) 
    } 
} 

App.propTypes = { 
    children: React.PropTypes.element.isRequired, 
    checkLogin: React.PropTypes.func.isRequired 
} 

export default App 

Zobacz tutaj pełny kod źródłowy: https://github.com/amaurymartiny/react-redux-auth0-kit

Answer 2

My Reactjs wiedza jest ograniczona, ale to zaczynało być długo na komentarz ...

Nie powinno być wywołanie store.dispatch(...) z wydarzeniami blokady?

Po zwrocie tych zdarzeń funkcja nie zrobi niczego, chyba że ktoś wywoła funkcję, która jest zwracana i według mojej wiedzy Zablokowanie nie wykonuje żadnej czynności z zwracaną wartością funkcji zwrotnej, którą przekazujesz jako procedurę obsługi zdarzeń.

Answer 3

Myślę, że to, co się dzieje, to auth0 przekierowuje okno przeglądarki do urzędu logowania (auth0, Facebook, Google itd.), A następnie przekierowuje cię z powrotem do twojej aplikacji, która przeładowuje twoją stronę, zasadniczo usuwając cały stan. Twoja wysyłka zostanie wysłana, a następnie ponownie załadowana strona, która zmyje twój stan. Logowanie wydaje się działać, jeśli używasz stanu localStorage zamiast stanu redux, ale nie jestem pewien, jak wpłynie to na cały inny stan, który będę musiał umieścić w mojej aplikacji.