Home
+Demo access_token is valid during 30 seconds
+Protected Admin
+ {oidcUser &&Bonjour {oidcUser.profile.name}
} +Protected Dashboard
+Unprotected home page
+Demo access_token is valid during 30 seconds
+Name: {props.name}
+Profile: {props.profile}
+Protected Admin
+Protected Admin
+ {oidcUser &&Bonjour {oidcUser.profile.name}
} +Vous allez être redirigé sur votre application.
++ Vous allez être redirigé sur votre application. +
+Vous allez être redirigé sur la page de login.
+Vous n'êtes pas authentifié.
+Vous n'êtes pas autorisé à accéder à cette ressource.
++ Vous allez être redirigé sur la page de login. +
++ Vous n'êtes pas authentifié. +
++ Vous n'êtes pas authentifié. +
+Vous allez être redirigé sur la page de login.
+Authentification en cours vous allez être redirigé.
+Vous n'êtes pas authentifié.
+Vous n'êtes pas autorisé à accéder à cette ressource.
+isEnabled
++ Vous allez être redirigé sur la page de login. +
++ Vous n'êtes pas authentifié. +
++ Vous n'êtes pas autorisé à accéder à cette ressource. +
++ isEnabled +
+`; diff --git a/packages/redux/src/authenticate.js b/packages/redux/src/authenticate.js new file mode 100644 index 000000000..1b767d334 --- /dev/null +++ b/packages/redux/src/authenticate.js @@ -0,0 +1,18 @@ +export const isRequireAuthentication = ({ user, isForce }) => isForce || !user; + +export const authenticateUserPure = isRequireAuthenticationInjected => ( + userManager, + location +) => async (isForce = false) => { + const user = await userManager.getUser(); + if (isRequireAuthenticationInjected({ user, isForce })) { + const currentUrl = location.pathname + (location.search ? location.search : ''); + await userManager.signinRedirect({ data: { url: currentUrl } }); + } +}; + +export const authenticateUser = (userManager, location) => + authenticateUserPure(isRequireAuthentication)(userManager, location); + +export const signinSilent = getUserManager => (data = undefined) => + getUserManager().signinSilent(data); diff --git a/packages/redux/src/authenticate.spec.js b/packages/redux/src/authenticate.spec.js new file mode 100644 index 000000000..7d585a892 --- /dev/null +++ b/packages/redux/src/authenticate.spec.js @@ -0,0 +1,49 @@ +import { isRequireAuthentication, authenticateUserPure, signinSilent } from './authenticate'; + +describe('redux.authenticate', () => { + it('isRequireAuthentication should return if authentication is required', () => { + const input = { user: {}, isForce: true }; + expect(isRequireAuthentication(input)).toBe(true); + input.isForce = false; + expect(isRequireAuthentication(input)).toBe(false); + input.isForce = false; + input.user = null; + expect(isRequireAuthentication(input)).toBe(true); + }); + + it('authenticateUserPure should call signinRedirect method', async () => { + const isRequireAuthenticationMock = () => true; + const mockCallback = jest.fn(); + const signinRedirect = () => + new Promise(resolve => { + mockCallback(); + resolve({}); + }); + const location = { pathname: '/test', search: 'user' }; + const localStorage = { setItem: () => {} }; + const userManager = { + getUser: () => + new Promise(resolve => { + resolve({}); + }), + signinRedirect, + }; + await authenticateUserPure(isRequireAuthenticationMock)(userManager, location, localStorage)(); + + expect(mockCallback.mock.calls).toHaveLength(1); + }); + + it('trySilentAuthenticate should call signinSilent method', async () => { + const mockCallback = jest.fn(); + const _signinSilent = () => + new Promise(resolve => { + mockCallback(); + resolve({}); + }); + + const getUserManager = () => ({ signinSilent: _signinSilent }); + await signinSilent(getUserManager)(); + + expect(mockCallback.mock.calls).toHaveLength(1); + }); +}); diff --git a/packages/redux/src/authenticationService.js b/packages/redux/src/authenticationService.js new file mode 100644 index 000000000..2367696d4 --- /dev/null +++ b/packages/redux/src/authenticationService.js @@ -0,0 +1,15 @@ +import { createUserManager } from 'redux-oidc'; + +let userManager; + +export const getUserManager = () => userManager; + +const authenticationService = authentication => { + if (userManager) { + return userManager; + } + userManager = createUserManager(authentication); + return userManager; +}; + +export default authenticationService; diff --git a/packages/redux/src/index.js b/packages/redux/src/index.js new file mode 100644 index 000000000..08f548812 --- /dev/null +++ b/packages/redux/src/index.js @@ -0,0 +1,21 @@ +import { OidcProvider, loadUser, reducer } from 'redux-oidc'; +import { isRequireAuthentication, authenticateUser, signinSilent } from './authenticate'; +import authenticationService, { getUserManager } from './authenticationService'; + +import { oidcSecure } from './OidcSecure'; + +export { OidcProvider, loadUser, reducer }; +export { isRequireAuthentication, authenticateUser, signinSilent }; +export { authenticationService, getUserManager }; + +export { default as Authenticating } from './Authenticating'; +export { default as AuthenticationCallback } from './AuthenticationCallback'; +export { default as NotAuthenticated } from './NotAuthenticated'; +export { default as NotAuthorized } from './NotAuthorized'; +export { default as AuthenticationRoutes } from './AuthenticationRoutes'; +export { default as AuthenticationSignSilentCallback } from './AuthenticationSignSilentCallback'; + +export { default as OidcRoutes } from './OidcRoutes'; +export { default as Oidc } from './Oidc'; +export { default as OidcSecure } from './OidcSecure'; +export { oidcSecure }; diff --git a/packages/redux/src/localStorage.js b/packages/redux/src/localStorage.js new file mode 100644 index 000000000..1e29841a0 --- /dev/null +++ b/packages/redux/src/localStorage.js @@ -0,0 +1,2 @@ +// eslint-disable-next-line +export const getLocalStorage = () => localStorage; diff --git a/packages/redux/src/logger.js b/packages/redux/src/logger.js new file mode 100644 index 000000000..861f7db77 --- /dev/null +++ b/packages/redux/src/logger.js @@ -0,0 +1,5 @@ +export const logError = (message, exception) => { + if (console && console.error) { + console.error(message, exception); + } +}; diff --git a/readme.md b/readme.md new file mode 100644 index 000000000..1266c1651 --- /dev/null +++ b/readme.md @@ -0,0 +1,63 @@ +# @axa-fr/react-oidc + +[](https://travis-ci.com/AxaGuilDEv/react-oidc) + +
+ 
+
+ A set of react components and HOC to make Oidc client easy. It aim to simplify OAuth authentication between multiples providers. +
+ +- [About](#about) +- [Getting Started](#getting-started) +- [How It Works](#how-it-works) +- Packages + - [`@axa-fr/react-oidc-context`](./packages/context#readme.md) + - [`@axa-fr/react-oidc-context-fetch`](./packages/context-fetch#readme.md) + - [`@axa-fr/react-oidc-redux`](./packages/redux#readme.md) + - [`@axa-fr/react-oidc-redux-fetch`](./packages/redux-fetch#readme.md) +- [Concepts](#concepts) +- [Contribute](#ontribute) + +## About + +These components is used to manage client authentication. +It uses the libraries ["oidc client"](https://github.com/IdentityModel/oidc-client-js). + +Two version of the component with different "State management" are available : + +- with redux +- with react context api + +## Getting Started + +- [`@axa-fr/react-oidc-context`](./packages/context#readme) +- [`@axa-fr/react-oidc-context-fetch`](./packages/context-fetch#readme) +- [`@axa-fr/react-oidc-redux`](./packages/redux#readme) +- [`@axa-fr/react-oidc-redux-fetch`](./packages/redux-fetch#readme) + +## How It Works + +These components encapsulate the use of "react-router-dom" and "oidc client" in order to hide workfow complexity. + +## Concept + +A set of react components and HOC to make Oidc client easy! + +The purpose of the component is : + +- Simple set up +- React component protection (by composing) +- Standardize the "Routes" used by the oauth flow +- Manage the recovery of tokens and different exchanges with "openid connect" server +- Flexible : You can customize routes and redirect components if you need it +- HOC => override "fetch" in order to retrieve a new "fetch" that will be able to manage http 401 and http 403 response. + +## Contribute + +- [How to run the solution and to contribute](./CONTRIBUTING.md) +- [Please respect our code of conduct](./CODE_OF_CONDUCT.md) diff --git a/scripts/compile-js.js b/scripts/compile-js.js new file mode 100644 index 000000000..0ed69cb90 --- /dev/null +++ b/scripts/compile-js.js @@ -0,0 +1,50 @@ +/* eslint-disable no-console */ +const fs = require('fs'); +const path = require('path'); +const shell = require('shelljs'); + +function getCommand(watch) { + const babel = path.join(__dirname, '..', 'node_modules', '.bin', 'babel'); + + const args = [ + '--ignore __mocks__/,**.spec.js,tests/*,__tests__/,**.test.js,stories/,**.story.js,**.stories.js,__snapshots__,**.tsx,**.ts', + './src --out-dir ./dist', + '--plugins "transform-runtime"', + '--source-maps', + '--copy-files', + ]; + + if (watch) { + args.push('-w'); + } + + return `${babel} ${args.join(' ')}`; +} + +function handleExit(code, errorCallback) { + if (code !== 0) { + if (errorCallback && typeof errorCallback === 'function') { + errorCallback(); + } + + shell.exit(code); + } +} + +function babelify(options = {}) { + const { watch = false, silent = true, errorCallback } = options; + + if (!fs.existsSync('src')) { + if (!silent) console.log('No src dir'); + return; + } + + const command = getCommand(watch); + const { code } = shell.exec(command, { silent }); + + handleExit(code, errorCallback); +} + +module.exports = { + babelify, +}; diff --git a/scripts/compile-ts.js b/scripts/compile-ts.js new file mode 100644 index 000000000..88c3caf37 --- /dev/null +++ b/scripts/compile-ts.js @@ -0,0 +1,55 @@ +/* eslint-disable no-console */ +const fs = require('fs'); +const path = require('path'); +const shell = require('shelljs'); + +function getCommand(watch) { + const tsc = path.join(__dirname, '..', 'node_modules', '.bin', 'tsc'); + + const currentDirectory = process.cwd(); + const output = path.join(currentDirectory, 'dist'); + const tsconfig = path.join(currentDirectory, 'tsconfig.json'); + const args = [ + `-p ${tsconfig}`, + `--outDir ${output}`, + '-d true', + `--declarationDir ${output}`, + '--declarationMap true', + '--listEmittedFiles true', + ]; + + if (watch) { + args.push('-w'); + } + const command = `${tsc} ${args.join(' ')}`; + + return command; +} + +function handleExit(code, errorCallback) { + if (code !== 0) { + if (errorCallback && typeof errorCallback === 'function') { + errorCallback(); + } + + shell.exit(code); + } +} + +function tscfy(options = {}) { + const { watch = false, silent = true, errorCallback } = options; + const tsConfigFile = 'tsconfig.json'; + if (!fs.existsSync(tsConfigFile)) { + if (!silent) console.log(`No ${tsConfigFile}`); + return; + } + + const command = getCommand(watch); + const { code } = shell.exec(command, { silent }); + + handleExit(code, errorCallback); +} + +module.exports = { + tscfy, +}; diff --git a/scripts/jest.init.js b/scripts/jest.init.js new file mode 100644 index 000000000..e605c7822 --- /dev/null +++ b/scripts/jest.init.js @@ -0,0 +1,13 @@ +// TODO: Remove this `raf` polyfill once the below issue is sorted +// https://github.com/facebookincubator/create-react-app/issues/3199#issuecomment-332842582 +import Enzyme from 'enzyme'; +import Adapter from 'enzyme-adapter-react-16'; + +Enzyme.configure({ adapter: new Adapter() }); + +const throwError = message => { + throw new Error(message); +}; + +global.console.error = throwError; +global.console.warn = throwError; diff --git a/scripts/prepare.js b/scripts/prepare.js new file mode 100644 index 000000000..47b296aa1 --- /dev/null +++ b/scripts/prepare.js @@ -0,0 +1,59 @@ +/* eslint-disable no-console */ +const path = require('path'); +const shell = require('shelljs'); +const chalk = require('chalk'); +const log = require('npmlog'); +const { babelify } = require('./compile-js'); +const { tscfy } = require('./compile-ts'); + +function getPackageJson() { + const modulePath = path.resolve('./'); + + // eslint-disable-next-line global-require,import/no-dynamic-require + return require(path.join(modulePath, 'package.json')); +} + +function removeDist() { + shell.rm('-rf', 'dist'); +} + +function removeTsFromDist() { + // add .ts filtering to babel args and remove after babel - 7 is adopted + // --copy-files option doesn't work with --ignore + // https://github.com/babel/babel/issues/5404 + + if (!shell.test('-d', 'dist')) { + return; + } + console.log(shell.find('dist')); + const tsFiles = shell.find('dist').filter(tsFile => tsFile.match(/\.ts$/)); + + if (tsFiles.length) { + shell.rm(tsFiles); + } +} + +function copyLicence() { + const licence = path.join(__dirname, '..', 'LICENSE'); + shell.cp(licence, './'); +} + +function logError(type, packageJson) { + log.error( + `FAILED to compile ${type}: ${chalk.bold(`${packageJson.name}@${packageJson.version}`)}` + ); +} + +removeDist(); +const packageJson = getPackageJson(); + +const tsFiles = shell.find('src').filter(tsFile => tsFile.match(/\.ts$/)); + +if (tsFiles.length !== 0) { + tscfy({ errorCallback: () => logError('ts', packageJson) }); +} else { + babelify({ errorCallback: () => logError('js', packageJson) }); +} +copyLicence(); + +console.log(chalk.gray(`Built: ${chalk.bold(`${packageJson.name}@${packageJson.version}`)}`)); diff --git a/scripts/test.js b/scripts/test.js new file mode 100644 index 000000000..3f3f9a647 --- /dev/null +++ b/scripts/test.js @@ -0,0 +1,168 @@ +#!/usr/bin/env node +const inquirer = require('inquirer'); +const program = require('commander'); +const childProcess = require('child_process'); +const chalk = require('chalk'); +const log = require('npmlog'); +const path = require('path'); + +log.heading = 'af-react-oidc'; +const prefix = 'test'; +log.addLevel('aborted', 3001, { fg: 'red', bold: true }); + +const spawn = command => { + const out = childProcess.spawnSync(`${command}`, { + shell: true, + stdio: 'inherit', + }); + + if (out.status !== 0) { + process.exit(out.status); + } + + return out; +}; + +const main = program.version('3.0.0').option('--all', `Test everything ${chalk.gray('(all)')}`); + +const createProject = ({ defaultValue, option, name, projectLocation, isJest }) => ({ + value: false, + defaultValue: defaultValue || false, + option: option || undefined, + name: name || 'unnamed task', + projectLocation, + isJest, +}); +const createOption = ({ defaultValue, option, name, extraParam }) => ({ + value: false, + defaultValue: defaultValue || false, + option: option || undefined, + name: name || 'unnamed task', + extraParam, +}); + +const tasks = { + core: createProject({ + name: `Core & React ${chalk.gray('(core)')}`, + defaultValue: true, + option: '--core', + projectLocation: path.join(__dirname, '..', 'packages'), + isJest: true, + }), + image: createProject({ + name: `Examples ${chalk.gray('(demo redux)')}`, + defaultValue: false, + option: '--image', + projectLocation: path.join(__dirname, '..', 'examples/redux'), + isJest: true, + }), + watchmode: createOption({ + name: `Run in watch-mode ${chalk.gray('(watchmode)')}`, + defaultValue: false, + option: '--watch', + extraParam: '--watch', + }), + coverage: createOption({ + name: `Output coverage reports ${chalk.gray('(coverage)')}`, + defaultValue: false, + option: '--coverage', + extraParam: '--coverage', + }), + runInBand: createOption({ + name: `Run all tests serially in the current process ${chalk.gray('(runInBand)')}`, + defaultValue: false, + option: '--runInBand', + extraParam: '--runInBand', + }), +}; + +const getProjects = list => { + const filtered = list.filter(key => key.projectLocation); + if (filtered.length > 0) { + return filtered; + } + + // if list would have been empty, we run with default projects + return Object.keys(tasks) + .map(key => tasks[key]) + .filter(key => key.projectLocation && key.defaultValue); +}; + +const getExtraParams = list => list.filter(key => key.extraParam).map(key => key.extraParam); + +Object.keys(tasks) + .reduce((acc, key) => acc.option(tasks[key].option, tasks[key].name), main) + .parse(process.argv); + +Object.keys(tasks).forEach(key => { + tasks[key].value = + program[tasks[key].option.replace('--', '')] || (program.all && tasks[key].projectLocation); +}); + +let selection; + +if ( + !Object.keys(tasks) + .map(key => tasks[key].value) + .filter(Boolean).length +) { + selection = inquirer + .prompt([ + { + type: 'checkbox', + message: 'Select which tests to run', + name: 'todo', + pageSize: 8, + choices: Object.keys(tasks) + .map(key => tasks[key]) + .filter(key => key.projectLocation) + .map(key => ({ + name: key.name, + checked: key.defaultValue, + })) + .concat(new inquirer.Separator()) + .concat( + Object.keys(tasks) + .map(key => tasks[key]) + .filter(key => key.extraParam) + .map(key => ({ + name: key.name, + checked: key.defaultValue, + })) + ), + }, + ]) + .then(({ todo }) => + todo.map(name => tasks[Object.keys(tasks).find(i => tasks[i].name === name)]) + ); +} else { + selection = Promise.resolve( + Object.keys(tasks) + .map(key => tasks[key]) + .filter(item => item.value === true) + ); +} + +selection + .then(list => { + if (list.length === 0) { + log.warn(prefix, 'Nothing to test'); + } else { + const projects = getProjects(list); + const jestProjects = projects.filter(key => key.isJest).map(key => key.projectLocation); + const nonJestProjects = projects.filter(key => !key.isJest); + const extraParams = getExtraParams(list).join(' '); + if (jestProjects.length > 0) { + spawn(`jest --projects ${jestProjects.join(' ')} ${extraParams}`); + } + nonJestProjects.forEach(key => + spawn(`npm --prefix ${key.projectLocation} test -- ${extraParams}`) + ); + process.stdout.write('\x07'); + } + }) + .catch(e => { + log.aborted(prefix, chalk.red(e.message)); + log.silly(prefix, e); + process.exit(1); + }); diff --git a/scripts/watch-js.js b/scripts/watch-js.js new file mode 100644 index 000000000..fa55099c9 --- /dev/null +++ b/scripts/watch-js.js @@ -0,0 +1,8 @@ +const { babelify } = require('./compile-js'); + +babelify({ + watch: true, + silent: false, + // eslint-disable-next-line no-console + errorCallback: () => console.error('Failed to compile js'), +}); diff --git a/scripts/watch-ts.js b/scripts/watch-ts.js new file mode 100644 index 000000000..3cabb8386 --- /dev/null +++ b/scripts/watch-ts.js @@ -0,0 +1,8 @@ +const { tscfy } = require('./compile-ts'); + +tscfy({ + watch: true, + silent: false, + // eslint-disable-next-line no-console + errorCallback: () => console.error('Failed to compile ts'), +}); diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 000000000..c10e37b0f --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,14 @@ +{ + "compileOnSave": false, + "compilerOptions": { + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "skipLibCheck": true, + "noImplicitAny": true, + "target": "es5", + "lib": [ + "es2016", + "dom" + ] + } +} \ No newline at end of file diff --git a/tslint.json b/tslint.json new file mode 100644 index 000000000..45d1f7977 --- /dev/null +++ b/tslint.json @@ -0,0 +1,154 @@ +{ + "extends": [ + "tslint-plugin-prettier", + "tslint-config-prettier" + ], + "rulesDirectory": [ + "node_modules/codelyzer" + ], + "rules": { + "prettier": { + "severity": "warning", + "options": { + "printWidth": 100, + "tabWidth": 2, + "bracketSpacing": true, + "trailingComma": "es5", + "singleQuote": true + } + }, + "arrow-return-shorthand": true, + "callable-types": true, + "class-name": true, + "comment-format": [ + true, + "check-space" + ], + "curly": true, + "eofline": true, + "forin": true, + "import-blacklist": [ + true, + "rxjs" + ], + "import-spacing": true, + "indent": [ + true, + "spaces", + 2 + ], + "interface-over-type-literal": true, + "label-position": true, + "max-line-length": [ + true, + 140 + ], + "member-access": false, + "member-ordering": [ + true, + { + "order": [ + "static-field", + "instance-field", + "static-method", + "instance-method" + ] + } + ], + "no-arg": true, + "no-bitwise": true, + "no-console": [ + true, + "debug", + "info", + "time", + "timeEnd", + "trace" + ], + "no-construct": true, + "no-debugger": true, + "no-duplicate-super": true, + "no-empty": false, + "no-empty-interface": true, + "no-eval": true, + "no-inferrable-types": [ + true, + "ignore-params" + ], + "no-misused-new": true, + "no-non-null-assertion": true, + "no-shadowed-variable": true, + "no-string-literal": false, + "no-string-throw": true, + "no-switch-case-fall-through": true, + "no-trailing-whitespace": true, + "no-unnecessary-initializer": true, + "no-unused-expression": true, + "no-use-before-declare": true, + "no-var-keyword": true, + "no-unused-variable": true, + "object-literal-sort-keys": false, + "one-line": [ + true, + "check-open-brace", + "check-catch", + "check-else", + "check-whitespace" + ], + "prefer-const": true, + "quotemark": [ + true, + "single" + ], + "radix": true, + "semicolon": [ + true, + "always" + ], + "triple-equals": [ + true, + "allow-null-check" + ], + "typedef-whitespace": [ + true, + { + "call-signature": "nospace", + "index-signature": "nospace", + "parameter": "nospace", + "property-declaration": "nospace", + "variable-declaration": "nospace" + } + ], + "unified-signatures": true, + "variable-name": false, + "directive-selector": [ + true, + "attribute", + "app", + "camelCase" + ], + "component-selector": [ + true, + "element", + "storybook", + "kebab-case" + ], + "use-input-property-decorator": true, + "use-output-property-decorator": true, + "use-host-property-decorator": true, + "no-input-rename": true, + "no-output-rename": true, + "use-life-cycle-interface": true, + "use-pipe-transform-interface": true, + "component-class-suffix": true, + "directive-class-suffix": true + }, + "linterOptions": { + "exclude": [ + "lib/cli/test/**", + "**/node_modules/**", + "**/dist/**", + "**/storybook-static/**" + ] + } +}