identity-auth-test v0.1.6

Identity - Auth - test

Installation

$ npm install identity-auth-test

Usage Example

This package must be wrapped by Provider from 'react-redux' pacakge.

index.ts

import { 
  AuthProvider,
  UserManagerMaker, 
  LoadUser,
  AuthCallback, 
  SilentRenew, 
} from 'identity-auth-test';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import { Provider } from 'react-redux';

import { store } from 'yourreduxfile';
import AuthRoute from 'yourauthprovider'; // this can be created by 

const userManageConfig = {
  client_id: 'yourclientid',
  redirect_uri: 'yourredirecturi',
  post_logout_redirect_uri: 'yourpostlogouturi',
  response_type: 'code',
  scope: 'openid',
  authority: 'yourauthority',
  grantType: 'authorization_code',
  silent_redirect_uri: 'http://{yoururl}/silent_renew.html',
  automaticSilentRenew: true,
  filterProtocolClaims: true,
  revokeAccessTokenOnSignout: true,
  loadUserInfo: true,
  monitorSession: false
};

const userManager = UserManagerMaker(userManagerSample);

LoadUser(store, userManager);

const App = () => {
  const AuthProviderProps = { 
    store: store,
    userManager: userManager
  }

  const AuthCallbackProps = { 
    userManager: userManager,
    successURL: '/yourauthroute',
    errorURL: '/yourroute'
  }

  return (
    <Provider store={StoreMaker}>
      <BrowserRouter>
        <AuthProvider {...AuthProviderProps}>
          <Switch>
            <AuthRoute path="/yourauthroute"><YourAuthComponent /></AuthRoute>
            <Route path="/yourroute"><YourComponent /></Route>
            <Route path="/callback"><AuthCallback /></Route>
            <Route path="/silent_renew.html"><SilentRenew /></Route>
          </Switch>
        </AuthProvider>
      </BrowserRouter>
    </Provider>
  );
}

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

Using StoreMaker

import { StoreMaker } from 'identity-auth-test';

export const initialState = {
  ...
}
export const reducer = (state = initialState, action: any) => {
  ...
}
...
...
export const store = StoreMaker({ clientstore: reducers });

Using configureStore of @reduxjs/toolkit

• Add 'redux-oidc/USER_FOUND' at 'ignoredActions'
• Add 'oidc.user' at 'ignoredPaths'

import { StoreMaker } from 'identity-auth-test/lib';
...
export const store = configureStore({
  reducer: {
    oidc: AuthReducer
  },
  middleware: [
    ...getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: ['redux-oidc/USER_FOUND', ...],
        ignoredPaths: ['oidc.user', ...],
      },
    }),
    ...middlewares,
  ],
  ...
});