https://github.com/danilobuerger/redux-implicit-oauth2

OAuth 2.0 Implicit Grant Flow with Redux
https://github.com/danilobuerger/redux-implicit-oauth2

oauth2 redux

Last synced: about 2 months ago
JSON representation

OAuth 2.0 Implicit Grant Flow with Redux

• Host: GitHub
• URL: https://github.com/danilobuerger/redux-implicit-oauth2
• Owner: danilobuerger
• License: mit
• Created: 2016-10-08T21:30:55.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2022-08-15T16:02:23.000Z (over 2 years ago)
• Last Synced: 2024-10-14T09:35:10.575Z (2 months ago)
• Topics: oauth2, redux
• Language: JavaScript
• Homepage:
• Size: 91.8 KB
• Stars: 30
• Watchers: 5
• Forks: 20
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![Build Status](https://travis-ci.org/danilobuerger/redux-implicit-oauth2.svg?branch=master)](https://travis-ci.org/danilobuerger/redux-implicit-oauth2) [![Coverage Status](https://coveralls.io/repos/github/danilobuerger/redux-implicit-oauth2/badge.svg?branch=master)](https://coveralls.io/github/danilobuerger/redux-implicit-oauth2?branch=master)

# redux-implicit-oauth2

[OAuth 2.0 Implicit Grant Flow](https://tools.ietf.org/html/rfc6749#section-4.2) with [Redux](https://github.com/reactjs/redux).

## Example (with React)

The following example displays either a login or logout button depending on the state.

Set the config object according to your OAuth 2.0 server parameters.

The redirect callback page should be on the same site as the rest of your app.

```jsx

import React from 'react'

import PropTypes from 'prop-types'

import { connect } from 'react-redux'

import { login, logout } from 'redux-implicit-oauth2'

const config = {

  url: "https://example.com/authorize",

  client: "some_client_id",

  redirect: "https://example.com/callback.html",

  scope: "some_scope",

  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 Logout

  } else {

    return Login

  }

}

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)

```

Don't forget to add the reducer and middleware to your Redux store:

```js

import { createStore, combineReducers, applyMiddleware } from 'redux'

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

const configureStore = (initialState) =>

  createStore(

    combineReducers({

      // other reducers

      auth

    }),

    initialState,

    applyMiddleware(

      // other middleware

      authMiddleware

    )

  )

export default configureStore

```