@criipto/verify-react 0.0.3 → 0.0.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@criipto/verify-react",
   "private": false,
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Verify SDK for React Single Page Applications",
   "main": "dist/criipto-verify-react.cjs.js",
   "types": "dist/index.d.ts",

package/.storybook/addons/client/preset.js

@@ -1,5 +0,0 @@
-function managerEntries(entry = []) {
-  return [...entry, require.resolve("./register")]; //👈 Addon implementation
-}
-
-module.exports = { managerEntries };

package/.storybook/addons/client/register.js

@@ -1,47 +0,0 @@
-const React = require('react');
-const { Fragment } = require('react');
-const { FORCE_RE_RENDER } = require('@storybook/core-events');
-const { addons, types, useEffect } = require('@storybook/addons');
-const { Separator, Form } = require('@storybook/components');
-const { useGlobals } = require('@storybook/api');
-
-addons.register("criipto/client-toolbar", () => {
-  addons.add("client-toolbar/toolbar", {
-    title: "Custom Client Toolbar",
-    //👇 Sets the type of UI element in Storybook
-    type: types.TOOL,
-    //👇 Shows the Toolbar UI element if either the Canvas or Docs tab is active
-    match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
-    render: ({ active }) => {
-      const [globals, updateGlobals] = useGlobals();
-      const domain = globals.domain;
-      const clientID = globals.clientID;
-
-      const handleDomainChange = (event) => {
-        updateGlobals({
-          domain: event.target.value,
-        });
-        // Invokes Storybook's addon API method (with the FORCE_RE_RENDER) event to trigger a UI refresh
-        addons.getChannel().emit(FORCE_RE_RENDER);
-      }
-
-      const handleClientIDChange = (event) => {
-        updateGlobals({
-          clientID: event.target.value,
-        });
-        // Invokes Storybook's addon API method (with the FORCE_RE_RENDER) event to trigger a UI refresh
-        addons.getChannel().emit(FORCE_RE_RENDER);
-      }
-
-      return (
-        <Fragment>
-          <Separator />
-          <div style={{display: 'flex', alignItems: 'center', gap: '5px'}}>
-            <Form.Input style={{minHeight: '20px', padding: '3px 6px', minWidth: '250px'}} value={domain} placeholder="Domain" onChange={handleDomainChange} />
-            <Form.Input style={{minHeight: '20px', padding: '3px 6px', minWidth: '250px'}} value={clientID} placeholder="Client ID" onChange={handleClientIDChange} />
-          </div>
-        </Fragment>
-      )
-    },
-  });
-});

package/.storybook/main.js

@@ -1,17 +0,0 @@
-module.exports = {
-  "stories": [
-    "../src/**/*.stories.mdx",
-    "../src/**/*.stories.@(js|jsx|ts|tsx)",
-    "../src/**/**/*.stories.@(js|jsx|ts|tsx)"
-  ],
-  "addons": [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
-    "./addons/client/preset.js"
-  ],
-  "framework": "@storybook/react",
-  "core": {
-    "builder": "@storybook/builder-webpack5"
-  }
-}

package/.storybook/preview.js

@@ -1,21 +0,0 @@
-export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-  globalTypes: {
-    domain: {
-      name: 'Domain',
-      description: 'Criipto Verify domain',
-      defaultValue: 'samples.criipto.id'
-    },
-    clientID: {
-      name: 'Client ID',
-      description: 'Criipto Verify Client ID',
-      defaultValue: 'urn:criipto:samples:criipto-verify-react'
-    }
-  }
-}

package/.vscode/settings.json

@@ -1,3 +0,0 @@
-{
-    "editor.tabSize": 2
-}

package/dist/criipto-verify-react.esm.css

@@ -1,75 +0,0 @@
-.criipto-verify-button.criipto-verify-button-eid {
-  background: #F9F8F4;
-  box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.25);
-  border-radius: 3px;
-  color: black;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  width: calc(100% - 10px);
-  box-sizing: border-box;
-  text-decoration: none;
-  min-height: 70px;
-  border: 0;
-  text-align: left;
-
-  margin: 12px 5px; /* Side margins to preserve drop shadow */
-  padding: 12px 24px;
-
-  font-family: "Raleway", sans-serif;
-  font-style: normal;
-  font-size: 13px;
-  line-height: 18px;
-}
-
-.criipto-verify-button.criipto-verify-button-eid strong {
-  font-weight: 700;
-}
-
-.criipto-verify-button.criipto-verify-button-eid img {
-  height: 24px;
-  padding-right: 20px;
-}
-
-.criipto-verify-button.criipto-verify-button-eid.criipto-verify-button-no-bankid img {
-  height: 18px;
-}
-.criipto-verify-button.criipto-verify-button-eid.criipto-verify-button-dk-nemid {
-  color: #0B6062;
-}
-.criipto-verify-button.criipto-verify-button-eid.criipto-verify-button-dk-nemid img {
-  width: 66px;
-  height: auto;
-}
-
-.criipto-verify-button.criipto-verify-button-eid.criipto-verify-button-dk-mitid {
-  background: #0060E6;
-  box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.25);
-  color: white;
-  font-family: "IBM Plex Sans", "Raleway", sans-serif;
-  font-style: normal;
-  font-weight: 500;
-  font-size: 14px;
-  line-height: 124%;
-}
-
-.criipto-verify-button.criipto-verify-button-eid.criipto-verify-button-dk-mitid img {
-  width: 66px;
-  height: auto;
-}
-
-.criipto-verify-button.criipto-verify-button-eid.criipto-verify-button-se-bankid {
-  color: #235971;
-}
-.criipto-verify-button.criipto-verify-button-eid.criipto-verify-button-se-bankid img {
-  width: 40px;
-  height: auto;
-}
-
-.criipto-verify-button.criipto-verify-button-eid.criipto-verify-button-no-bankid img {
-  height: 13px;
-}
-
-.criipto-verify-button.criipto-verify-button-eid.criipto-verify-button-fi img {
-  height: 40px;
-}

package/netlify.toml

@@ -1,3 +0,0 @@
-[build]
-  publish = "storybook-static/"
-  command = "npm run build-storybook"

package/src/components/AuthMethodButton/AuthMethodButton.css

@@ -1,75 +0,0 @@
-.criipto-verify-button.criipto-verify-button-eid {
-  background: #F9F8F4;
-  box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.25);
-  border-radius: 3px;
-  color: black;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  width: calc(100% - 10px);
-  box-sizing: border-box;
-  text-decoration: none;
-  min-height: 70px;
-  border: 0;
-  text-align: left;
-
-  margin: 12px 5px; /* Side margins to preserve drop shadow */
-  padding: 12px 24px;
-
-  font-family: "Raleway", sans-serif;
-  font-style: normal;
-  font-size: 13px;
-  line-height: 18px;
-}
-
-.criipto-verify-button.criipto-verify-button-eid strong {
-  font-weight: 700;
-}
-
-.criipto-verify-button.criipto-verify-button-eid img {
-  height: 24px;
-  padding-right: 20px;
-}
-
-.criipto-verify-button.criipto-verify-button-eid.criipto-verify-button-no-bankid img {
-  height: 18px;
-}
-.criipto-verify-button.criipto-verify-button-eid.criipto-verify-button-dk-nemid {
-  color: #0B6062;
-}
-.criipto-verify-button.criipto-verify-button-eid.criipto-verify-button-dk-nemid img {
-  width: 66px;
-  height: auto;
-}
-
-.criipto-verify-button.criipto-verify-button-eid.criipto-verify-button-dk-mitid {
-  background: #0060E6;
-  box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.25);
-  color: white;
-  font-family: "IBM Plex Sans", "Raleway", sans-serif;
-  font-style: normal;
-  font-weight: 500;
-  font-size: 14px;
-  line-height: 124%;
-}
-
-.criipto-verify-button.criipto-verify-button-eid.criipto-verify-button-dk-mitid img {
-  width: 66px;
-  height: auto;
-}
-
-.criipto-verify-button.criipto-verify-button-eid.criipto-verify-button-se-bankid {
-  color: #235971;
-}
-.criipto-verify-button.criipto-verify-button-eid.criipto-verify-button-se-bankid img {
-  width: 40px;
-  height: auto;
-}
-
-.criipto-verify-button.criipto-verify-button-eid.criipto-verify-button-no-bankid img {
-  height: 13px;
-}
-
-.criipto-verify-button.criipto-verify-button-eid.criipto-verify-button-fi img {
-  height: 40px;
-}

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'
-  }
-};