@criipto/verify-react 0.0.3 → 0.0.6

package/src/components/AuthMethodButton/AuthMethodButton.tsx

@@ -1,128 +0,0 @@
-import React, {useContext, useEffect, useState} from 'react';
-
-import beeid from './logos/beeid.png';
-import digid from './logos/digid.png';
-import dkmitid from './logos/dkmitid.png';
-import dknemid from './logos/dknemid.png';
-import ftnmobile from './logos/ftnmobile.png';
-import itsme from './logos/itsme.png';
-import nobankid from './logos/nobankid.png';
-import novipps from './logos/novipps.png';
-import sebankid from './logos/sebankid.png';
-import sofort from './logos/sofort.png';
-
-import './AuthMethodButton.css';
-import CriiptoVerifyContext from '../../context';
-
-interface ButtonProps {
-  className?: string,
-  children: React.ReactNode,
-  onClick?: React.MouseEventHandler
-}
-
-interface AnchorButtonProps extends ButtonProps {
-  href: string
-}
-
-export function AnchorButton(props: AnchorButtonProps) {
-  return (
-    <a className={`criipto-verify-button ${props.className}`} href={props.href} onClick={props.onClick}>{props.children}</a>
-  );
-}
-
-export function Button(props: ButtonProps) {
-  return (
-    <button className={`criipto-verify-button ${props.className}`} type="button"  onClick={props.onClick}>{props.children}</button>
-  );
-}
-
-interface AuthMethodButtonProps {
-  acrValue: string,
-  href?: string;
-  onClick?: React.MouseEventHandler,
-  children?: React.ReactNode,
-  'data-testid'?: string,
-  className?: string,
-  redirectUri?: string
-}
-
-export default function AuthMethodButton(props: AuthMethodButtonProps) {
-	const {acrValue} = props;
-  const context = useContext(CriiptoVerifyContext);
-	const className = `criipto-verify-button-eid ${acrValueToClassName(acrValue)}${props.className ? ` ${props.className}` : ''}`;
-
-  const [href, setHref] = useState(props.href);
-
-  useEffect(() => {
-    if (props.href) return;
-
-    context.buildAuthorizeUrl({
-      redirectUri: props.redirectUri,
-      acrValues: acrValue
-    }).then(setHref)
-    .catch(console.error);
-  }, [props.href, acrValue]);
-
-	if (href) {
-		return (
-			<AnchorButton {...props} href={href} className={className}>
-				{acrValueToLogo(acrValue) ? <img src={acrValueToLogo(acrValue)} alt="" /> : null}
-				<span>{props.children}</span>
-			</AnchorButton>
-		);
-	}
-
-	return (
-		<Button {...props} className={className}>
-			{acrValueToLogo(acrValue) ? <img src={acrValueToLogo(acrValue)} alt="" /> : null}
-			<span>{props.children}</span>
-		</Button>
-	);
-}
-
-function acrValueToClassName(value: string) {
-  value = value.replace('urn:grn:authn:', '');
-  const segments = value.split(':');
-  const classNames = segments.reduce((memo: string[], segment: string) => {
-    if (memo.length) {
-      return memo.concat([`${memo[memo.length-1]}-${segment}`])
-    } else {
-      return memo.concat([segment]);
-    }
-  }, []);
-
-  return classNames.map(className => `criipto-verify-button-${className}`).join(' ');
-}
-
-function acrValueToLogo(value : string) {
-	if (value.startsWith('urn:grn:authn:be:eid')) {
-		return beeid;
-	}
-	if (value.startsWith('urn:grn:authn:nl:digid')) {
-		return digid;
-	}
-	if (value.startsWith('urn:grn:authn:dk:mitid')) {
-		return dkmitid;
-	}
-	if (value.startsWith('urn:grn:authn:dk:nemid')) {
-		return dknemid;
-	}
-	if (value.startsWith('urn:grn:authn:fi')) {
-		return ftnmobile;
-	}
-	if (value.startsWith('urn:grn:authn:itsme')) {
-		return itsme;
-	}
-	if (value.startsWith('urn:grn:authn:se:bankid')) {
-		return sebankid;
-	}
-	if (value.startsWith('urn:grn:authn:de:sofort')) {
-		return sofort;
-	}
-	if (value.startsWith('urn:grn:authn:no:bankid')) {
-		return nobankid;
-	}
-	if (value.startsWith('urn:grn:authn:no:vipps')) {
-		return novipps;
-	}
-}

package/src/components/AuthMethodButton/package.json

@@ -1,3 +0,0 @@
-{
-  "main": "./AuthMethodButton.tsx"
-}

package/src/components/AuthMethodSelector/AuthMethodSelector.stories.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-
-import AuthMethodSelector from './AuthMethodSelector';
-import CriiptoVerifyProvider from '../../provider';
-
-export default {
-  title: 'Components/AuthMethodSelector',
-  component: AuthMethodSelector,
-} as ComponentMeta<typeof AuthMethodSelector>;
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template: ComponentStory<typeof AuthMethodSelector> = (args, {globals}) => {
-  return (
-    <CriiptoVerifyProvider domain={globals.domain} clientID={globals.clientID} redirectUri="https://httpbin.org/get">
-      <AuthMethodSelector {...args} />
-    </CriiptoVerifyProvider>
-  );
-};
-
-export const Default = Template.bind({});

package/src/components/AuthMethodSelector/AuthMethodSelector.tsx

@@ -1,43 +0,0 @@
-import {OpenIDConfiguration} from '@criipto/auth-js';
-import React, { useContext, useEffect, useState } from 'react';
-import CriiptoVerifyContext from '../../context';
-import { acrValueToTitle, filterAcrValues, Language } from '../../utils';
-import AuthMethodButton from '../AuthMethodButton/AuthMethodButton';
-
-interface Props {
-  acrValues?: string[],
-  language?: Language,
-  onSelect?: (acrValue: string) => void,
-  redirectUri?: string
-}
-
-export default function AuthMethodSelector(props: Props) {
-  const context = useContext(CriiptoVerifyContext);
-  const language = props.language || 'en';
-  const [configuration, setConfiguration] = useState<OpenIDConfiguration | null>(null);
-
-  useEffect(() => {
-    (async () => {
-      const configuration = await context.fetchOpenIDConfiguration();
-      setConfiguration(configuration);
-    })();
-  }, []);
-
-  const acrValues = filterAcrValues(props.acrValues ?? configuration?.acr_values_supported ?? []);
-
-  return (
-    <React.Fragment>
-      {acrValues.map(acrValue => (
-        <AuthMethodButton
-          acrValue={acrValue}
-          key={acrValue}
-          onClick={props.onSelect ? (() => props.onSelect!(acrValue)) : undefined}
-          redirectUri={props.redirectUri}
-        >
-          {acrValueToTitle(language, acrValue).title}<br />
-          {acrValueToTitle(language, acrValue).subtitle}
-        </AuthMethodButton>
-      ))}
-    </React.Fragment>
-  )
-}

package/src/components/AuthMethodSelector/package.json

@@ -1,3 +0,0 @@
-{
-  "main": "./AuthMethodSelector.tsx"
-}

package/src/context.ts

@@ -1,28 +0,0 @@
-import {OpenIDConfiguration, AuthorizeUrlParamsOptional} from '@criipto/auth-js';
-import { createContext } from 'react';
-
-export interface CriiptoVerifyContextInterface {
-  loginWithRedirect: () => Promise<void>,
-  fetchOpenIDConfiguration: () => Promise<OpenIDConfiguration>,
-  buildAuthorizeUrl: (options?: AuthorizeUrlParamsOptional) => Promise<string>
-}
-
-/**
- * @ignore
- */
-const stub = (): never => {
-  throw new Error('You forgot to wrap your component in <CriiptoVerifyProvider>.');
-};
-
-/**
- * @ignore
- */
-const initialContext = {
-  loginWithRedirect: stub,
-  fetchOpenIDConfiguration: stub,
-  buildAuthorizeUrl: stub
-};
-
-const CriiptoVerifyContext = createContext<CriiptoVerifyContextInterface>(initialContext);
-
-export default CriiptoVerifyContext;

package/src/global.d.ts

@@ -1,4 +0,0 @@
-declare module "*.png" {
-  const value: string;
-  export default value;
-}

package/src/index.ts

@@ -1,5 +0,0 @@
-import {default as CriiptoVerifyProvider} from './provider';
-import {default as AuthMethodSelector} from './components/AuthMethodSelector';
-import {default as AuthMethodButton} from './components/AuthMethodButton';
-
-export {CriiptoVerifyProvider, AuthMethodSelector, AuthMethodButton};

package/src/provider.tsx

@@ -1,45 +0,0 @@
-import React, {useMemo, useState} from 'react';
-import CriiptoAuth, {AuthorizeUrlParamsOptional} from '@criipto/auth-js';
-
-import CriiptoVerifyContext, {CriiptoVerifyContextInterface} from './context';
-
-export interface CriiptoVerifyProviderOptions {
-  domain: string
-  clientID: string
-  redirectUri?: string;
-  children: React.ReactNode
-}
-
-const CriiptoVerifyProvider = (props: CriiptoVerifyProviderOptions) : JSX.Element => {
-  const [client] = useState(
-    () => new CriiptoAuth({
-      domain: props.domain,
-      clientID: props.clientID,
-      store: sessionStorage,
-      redirectUri: props.redirectUri
-    })
-  );
-
-  const context = useMemo<CriiptoVerifyContextInterface>(() => {
-    return {
-      loginWithRedirect: () => client.redirect.authorize({
-        redirectUri: window.location.origin
-      }),
-      fetchOpenIDConfiguration: () => client.fetchOpenIDConfiguration(),
-      buildAuthorizeUrl: async (options?: AuthorizeUrlParamsOptional) => {
-        return await client.buildAuthorizeUrl(client.buildAuthorizeParams(options || {}));
-      }
-    }
-  }, [
-    client,
-    props.redirectUri
-  ]);
-
-  return (
-    <CriiptoVerifyContext.Provider value={context}>
-      {props.children}
-    </CriiptoVerifyContext.Provider>
-  );
-}
-
-export default CriiptoVerifyProvider

package/src/utils.ts

@@ -1,129 +0,0 @@
-export const DKMITID_PREFIX = 'urn:grn:authn:dk:mitid';
-
-export function lowestMitIDValue(input: string[]) : string | null {
-  let dkmitidMethod : string | null = null;
-
-  input.forEach(s => {
-    if (s.startsWith(DKMITID_PREFIX)) {
-      if (!dkmitidMethod) {
-        dkmitidMethod = s;
-      } else {
-        let newLevel = s.replace(DKMITID_PREFIX, '');
-        let oldLevel = dkmitidMethod.replace(DKMITID_PREFIX, '');
-        if (newLevel === ':low' && [':substantial', ':high'].includes(oldLevel)) {
-          dkmitidMethod = s;
-        }
-        else if (newLevel === ':substantial' && oldLevel === ':high') {
-          dkmitidMethod = s;
-        }
-      }
-    }
-  });
-
-  return dkmitidMethod;
-}
-
-function autoTitleCase(input: string) {
-  var segments = input.split(/:|-/).map(segment => {
-    segment = segment.replace(/id(\s|$)/, 'ID');
-    if (segment.length === 2) return segment.toUpperCase();
-    return segment.substr(0, 1).toUpperCase() + segment.substr(1);
-  });
-  return segments.join(' ');
-}
-
-export type Language = 'en' | 'da' | 'sv' | 'nb';
-
-export function acrValueToTitle(language: Language, value: string) : {title: string, subtitle?: string} {
-	value = value.replace('urn:grn:authn:', '');
-
-  if (value.startsWith('be:eid')) {
-    return {title: autoTitleCase(value).replace('BEEID', 'Belgian eID')};
-  }
-  if (value.startsWith('nl:digid')) {
-    return {title: autoTitleCase(value).replace('NL ', '')};
-  }
-  if (value.startsWith('dk:mitid')) {
-    return {title: 'MitID'};
-  }
-  if (value.startsWith('dk:nemid')) {
-		let subtitle : string | undefined = undefined;
-		let suffix = value.replace('dk:nemid:', '');
-		
-		if (suffix === 'poces') {
-			if (language === 'en') subtitle = 'Personal';
-			if (language === 'da') subtitle = 'Personlig';
-			if (language === 'sv') subtitle = 'Personlig';
-			if (language === 'nb') subtitle = 'Personlig';
-		}
-		if (suffix === 'moces') {
-			if (language === 'en') subtitle = 'Employee key card';
-			if (language === 'da') subtitle = 'Medarbejder nøglekort';
-			if (language === 'sv') subtitle = 'Anställd nyckelkort';
-			if (language === 'nb') subtitle = 'Ansatt nøkkelkort';
-		}
-		if (suffix === 'moces:codefile') {
-			if (language === 'en') subtitle = 'Employee key file';
-			if (language === 'da') subtitle = 'Medarbejder nøglefil';
-			if (language === 'sv') subtitle = 'Anställd nyckelfil';
-			if (language === 'nb') subtitle = 'Ansatt nøkkelfil';
-		}
-
-    return {
-			title: 'NemID',
-			subtitle
-		}
-  }
-  if (value.startsWith('fi')) {
-    return {title: autoTitleCase(value).replace('FI', 'FTN')};
-  }
-  if (value.startsWith('itsme')) {
-    return {title: autoTitleCase(value).replace('me', 'ME')};
-  }
-  if (value.startsWith('se:bankid')) {
-		let subtitle : string | undefined = undefined;
-		let suffix = value.replace('se:bankid:', '');
-
-		if (suffix === 'same-device') {
-			if (language === 'en') subtitle = 'On this device';
-			if (language === 'da') subtitle = 'På denne enhed';
-			if (language === 'sv') subtitle = 'På denna enheten';
-			if (language === 'nb') subtitle = 'På denne enheten';
-		}
-		if (suffix === 'another-device') {
-			if (language === 'en') subtitle = 'With your SSN';
-			if (language === 'da') subtitle = 'Med dit personnummer';
-			if (language === 'sv') subtitle = 'Med ditt personnummer';
-			if (language === 'nb') subtitle = 'Med personnummeret ditt';
-		}
-		if (suffix === 'another-device:qr') {
-			if (language === 'en') subtitle = 'With QR Code';
-			if (language === 'da') subtitle = 'Med QR-kode';
-			if (language === 'sv') subtitle = 'Med QR-kod';
-			if (language === 'nb') subtitle = 'Med QR-kode';
-		}
-
-    return {title: 'BankID', subtitle};
-  }
-  if (value.startsWith('de:sofort')) {
-    return {title: autoTitleCase(value).replace('DE ', '')};
-  }
-  if (value.startsWith('no:bankid')) {
-    return {title: autoTitleCase(value).replace('NO ', '')};
-  }
-  if (value.startsWith('no:vipps')) {
-    return {title: autoTitleCase(value).replace('NO ', '')};
-  }
-
-  return {title: autoTitleCase(value)};
-}
-
-export function filterAcrValues(input: string[]) {
-  let original = input.slice();
-  let dkmitidMethod : string | null = lowestMitIDValue(input);
-
-  if (dkmitidMethod) {
-    return input.filter(s => !s.startsWith(DKMITID_PREFIX)).concat([dkmitidMethod]).sort((a, b) => original.indexOf(a) - original.indexOf(b));
-  }
-  return input;
-}

package/webpack.config.js

@@ -1,72 +0,0 @@
-const path = require('path');
-const nodeExternals = require('webpack-node-externals');
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const fs = require('fs');
-
-module.exports = {
-  mode: 'production',
-  devtool: "source-map",
-  experiments: {
-    outputModule: true
-  },
-  entry: {
-    'criipto-verify-react.esm': {
-      import: path.resolve(__dirname, 'src/index.ts'),
-      library: {
-        type: 'module'
-      }
-    },
-    'criipto-verify-react.cjs': {
-      import: path.resolve(__dirname, 'src/index.ts'),
-      library: {
-        type: 'commonjs'
-      }
-    }
-  },
-  externalsPresets: { node: true },
-  externals: [nodeExternals()],
-  plugins: [
-    new MiniCssExtractPlugin()
-  ],
-  module: {
-    rules: [
-      {
-        test: /\.css$/i,
-        use: [
-          {
-            loader: MiniCssExtractPlugin.loader,
-          },
-          {
-            loader: "css-loader",
-            options: {
-              sourceMap: false
-            }
-          }
-        ],
-      },
-      {
-        test: /\.tsx?$/,
-        exclude: /node_modules/,
-        loader: 'ts-loader',
-      },
-      {
-        test: /\.(png|jpg|gif|svg)$/i,
-        use: [
-          {
-            loader: 'url-loader',
-            options: {
-              limit: true,
-            },
-          },
-        ]
-      }
-    ]
-  },
-  resolve: {
-    extensions: ['.tsx', '.ts', '.js'],
-  },
-  output: {
-    path: path.resolve(__dirname, 'dist'),
-    filename: '[name].js'
-  }
-};