@junicus_/react-msal-redux

react-msal-redux

React library that supports authenticating against Azure AD using Msal and Redux

Installation

npm install @junicus_/react-msal-redux

or

yarn add @junicus_/react-msal-redux

Usage

import { applyMiddleware, createStore, combineReducers } from 'redux';
import { authMiddleware, authReducer } from '@junicus_/react-msal-redux';
import { composeWithDevTools } from 'redux-devtools-extension';

const clientId = process.env.REACT_APP_AUTH_CLIENTID || '';
const authority = process.env.REACT_APP_AUTH_AUTHORITY || '';

const rootReducer = combineReducers({
  auth: authReducer,
});

export const configureStore = preloadedState => {
  const middleware = [
    authMiddleware({
      auth: { clientId, authority },
      cache: { cacheLocation: 'localStorage', storeAuthStateInCookie: true },
      system: { tokenRenewalOffsetSeconds: 600 },
      framework: { isAngular: false },
    }),
  ];
  const middlewareEnhancer = applyMiddleware(...middleware);

  const store = createStore(rootReducer, preloadedState, composeWithDevTools(middlewareEnhancer));

  return store;
};

import React from 'react';
import { connect } from 'react-redux';
import App from './App';
import { login, logout } from '@junicus_/react-msal-redux';

const AppContainer = props => {
  return <App user={props.auth.user} accessToken={props.auth.accessToken} login={props.login} logout={props.logout} />;
};

const mapStateToProps = state => ({
  auth: state.auth,
});

const mapDispatchToProps = dispatch => ({
  login: () => dispatch(login({ popup: true, scopes: ['openid'] })),
  logout: () => dispatch(logout()),
});

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(AppContainer);

Actions

Constant	Payload	Description
@auth/SIGNIN	{ popup?: boolean; scopes: string[]; }	Used to trigger a loging
@auth/SIGNOUT	n/a	Used to trigger a logout
@auth/ACQUIRE_ACCESSTOKEN_SUCCESS	{ accessToken: string; scopes: string[]; }	Triggered when access token received or refreshed
@auth/SINGNIN_SUCCESS	{ user: User; }	Triggered when sign in is successful
@auth/SINGNIN_FAILED	{ error: any; }	Triggered when sign in failed

Functions

Login

import { login } from '@junicus_/react-msal-redux'

Dispatch to trigger a login

Args

Parameter	Type	Description
payload	SignInPayload	{ popup?: boolean; scopes: string[]; }

Logout

import { logout } from '@junicus_/react-msal-redux'

Dispatch to trigger a logout