I can make a call to dispatch(login(config)) and cause the login window to pop-up. I can successfully get a token, and the store state is populated as expected. If I choose to close the pop-up without authenticating the store state is also as expected.
For some reason, though, I don't see a 'LOGIN_REQUEST' action taking place, nor does isLoggingIn get set. Any ideas what could be going wrong?

Hi,

I am trying to integrate this library with my React app (created using create-react-app). I have followed the example setup but once I have authenticated, the popup closes but I am not taken to the redirect url and I can't see the auth token. I've tried testing the implicit flow with my auth server and that seems to be working. What am I doing wrong?

Here are my app files:

App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Login from './Login.js'
import store from './store';
import { Provider } from 'react-redux';

class App extends Component {
  render() {
    return (

      <div className="App">
        <Provider store={store}>
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <h1 className="App-title">React OAuth Test</h1>
            <Login />
          </header>
        </Provider>
      </div>
    );
  }
}
export default App;

Login.js

import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { login, logout } from 'redux-implicit-oauth2'
 
const config = {
  url: "http://localhost:8080/oauth/authorize",
  client: "clientid",
  redirect: "http://localhost:3000/callback.html",
  scope: "webclient",
  width: 400, // Width (in pixels) of login popup window. Optional, default: 400
  height: 400 // Height (in pixels) of login popup window. Optional, default: 400
}
 
const Login = ({ isLoggedIn, login, logout }) => {
  if (isLoggedIn) {
    return <button type='button' onClick={logout}>Logout</button>
  } else {
    return <button type='button' onClick={login}>Login</button>
  }
}
 
Login.propTypes = {
  isLoggedIn: PropTypes.bool.isRequired,
  login: PropTypes.func.isRequired,
  logout: PropTypes.func.isRequired
}
 
const mapStateToProps = ({ auth }) => ({
  isLoggedIn: auth.isLoggedIn
})
 
const mapDispatchToProps = {
  login: () => login(config),
  logout
}
 
export default connect(mapStateToProps, mapDispatchToProps)(Login)
store.js

store.js

import { createStore, combineReducers, applyMiddleware } from 'redux'
import { authMiddleware, authReducer as auth } from 'redux-implicit-oauth2'

export default createStore(
    combineReducers({
      // other reducers
      auth
    }),
    applyMiddleware(
      // other middleware
      authMiddleware
    )
  )

It would be nice if you could specify the size of the popup window.
It's currently locked to 400x400, but some Oauth authorization pages are too large to be displayed in this window size.

Hey I'm trying to use this with an api where the reponse_type sent needs to be set as code not token. Would be great if this was configurable.

in token.js getToken() doesn't return a token properly because EXPIRES_AT_KEY isn't set right/checked because of null vs ''.

There's currently no way to tell by the state of the store if authentication is in progress.

You can infer by 'isLoggedIn' and 'error', but this leaves discrepancies. For example, if you fail an authentication and then fail again, there's no way to tell when the second failure has occurred.

Is there a way to configure the Login as a redirect and not as pop up?

@danilobuerger when I run the example, nothing seems to be happening - no errors, no network activity, no logs and no blocked plugins. Any ideas?

Currently i have front runs on localhost:1234/
but my requirements for oauth2 is:
{
response_type: token
client_id: octes
state: hsadjksahdjksahdjksahdjkhsadjkhsakjd
redirect_uri: http://octes/oauth/callback
scope: openid profile email
}
it is possible to use? If yes, how? plz provide example if it is not a problem.

Based on Instagram's documentation, for the Client-Side (Implicit) Authentication they provide the response to the authentication request as below:
http://your-redirect-uri?state=STATE#access_token=ACCESS-TOKEN
As can be seen from the above, only the access token is provided as a fragment in the url. However, currently the library query-string in oauth2.js to fetch the value after the hash and searches for state and access_token in it. This process makes the library unable to fetch the state correctly and even upon successful authentication it always returns:
{type: "LOGIN_FAILURE", error: "Invalid state returned."} as the login function's return value. I can volunteer to create a pull request to fix this.