sgswtky/index.html

## index.html
<!DOCTYPE html>
<html>
<body>
<script src="https://www.google.com/recaptcha/api.js?render=INPUT_YOUR_RECAPTCHA_TOKEN"></script>
<style type="text/css">
    .container {font-size: 0;}
    .box {display: inline-block; font-size: 16px; margin: 0 20px;}
</style>
<div class="container">
    <div class="box">
    <h2>sign up</h2>
    <form id="signup-form">
        <div>
            <input type="email" name="username" placeholder="Email">
        </div>
        <div>
            <input type="password" name="password" placeholder="Password">
        </div>
        <div>
            <input type="text" name="given_name" placeholder="Given name">
        </div>
        <div>
            <input type="text" name="family_name" placeholder="Family name">
        </div>
        <input type="submit" value="sign up">
    </form>
    </div>

    <div class="box">
        <h2>sign in</h2>
        <form id="signin-form">
            <div>
                <input type="email" name="username" placeholder="Email">
            </div>
            <div>
                <input type="password" name="password" placeholder="Password">
            </div>
            <input type="submit" value="sign in">
        </form>
    </div>

    <div class="box">
        <h2>sign in challenge</h2>
        <form id="signin-challenge">
            <div>
                <input type="email" name="username" placeholder="Email">
            </div>
            <div id="aikotoba-label" style="display: none;">
                <p>please input 'aikotoba'</p>
            </div>
            <div id="aikotoba" style="display: none;">
                <input type="text" name="aikotoba" placeholder="aikotoba">
            </div>
            <input type="submit" value="sign in">
        </form>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script src="dist/bundle.js"></script>
</body>
</html>

## index.js
import load from './load'

## load.js
const Auth = require('@aws-amplify/auth').Auth;

const config = {
    aws: {
        region: 'ap-northeast-1',
        cognito: {
            userPoolId: 'INPUT_YOUR_USER_POOL_ID',
            userPoolWebClientId: 'INPUT_YOUR_USER_POOL_WEB_CLIENT_ID',
        },
    },
    recaptcha: {
        siteKey: 'INPUT_YOUR_RECAPTCHA_SECRET_KEY',
    },
};

Auth.configure({
    Auth: {
        region: config.aws.region,
        userPoolId: config.aws.cognito.userPoolId,
        userPoolWebClientId: config.aws.cognito.userPoolWebClientId,
    }
});

grecaptcha.ready(function () {
    document.getElementById("signup-form").addEventListener("submit", signUp);
    document.getElementById("signin-form").addEventListener("submit", signIn);
    document.getElementById("signin-challenge").addEventListener("submit", signInChallenge);
});

async function signUp(event) {
    event.preventDefault();

    const form = event.target;
    const username = form.elements['username'].value;
    const password = form.elements['password'].value;

    try {
        const recaptchaToken = await grecaptcha.execute(config.recaptcha.siteKey, {action: 'signUp'});
        await Auth.signUp({
            username: username,
            password: password,
            attributes: {
                'email': username,
            },
            validationData: {},
            clientMetadata: {
                'recaptchaToken': recaptchaToken,
            },
        });
        alert('Success signed up');
    } catch (err) {
        alert("ERR");
    }
}

async function signIn(event) {
    event.preventDefault();

    const form = event.target;
    const username = form.elements['username'].value;
    const password = form.elements['password'].value;

    try {
        const recaptchaToken = await grecaptcha.execute(config.recaptcha.siteKey, {action: 'signIn'});
        const cognitoUser = await Auth.signIn({
            username: username,
            password: password,
            validationData: {
                'recaptchaToken': recaptchaToken,
            },
        });
        console.log(cognitoUser)
        alert('Success signed in');
    } catch (err) {
        console.log(err);
        alert("ERR");
    }
}

var cognitoUser = null;

async function signInChallenge(event) {
    event.preventDefault();

    const form = event.target;
    const username = form.elements['username'].value;

    console.log(cognitoUser);

    if (cognitoUser === null) {
        console.log("start custom challenge.");
        try {
            const recaptchaToken = await grecaptcha.execute(config.recaptcha.siteKey, {action: 'signIn'});
            cognitoUser = await Auth.signIn({
                username: username,
                validationData: {
                    'recaptchaToken': recaptchaToken,
                },
            });
            document.getElementById("aikotoba").style.display = "block";
            document.getElementById("aikotoba-label").style.display = "block";
            console.log(cognitoUser)
        } catch (err) {
            console.log(err);
            alert("ERR");
        }
    } else {
        console.log("authorize custom challenge.")
        const aikotoba = form.elements['aikotoba'].value;
        document.getElementById("aikotoba").style.display = "none";
        document.getElementById("aikotoba-label").style.display = "none";
        try {
            const answerResp = await Auth.sendCustomChallengeAnswer(cognitoUser, aikotoba)
            console.log(answerResp)
            alert('Success signed in');
        } catch (err) {
            console.log(err);
            alert("ERR");
        } finally {
            cognitoUser = null
        }
    }
}

## package.json
{
  "name": "front",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "rm -rf dist && webpack && webpack-cli serve --mode development"
  },
  "dependencies": {
    "aws-amplify": "3.0.25"
  },
  "resolutions": {
    "graphql": "^15.0.0"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^8.2.2",
    "babel-preset-es2015": "^6.24.1",
    "clean-webpack-plugin": "^3.0.0",
    "util": "^0.12.3",
    "webpack": "^5.21.2",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "^3.11.2"
  }
}
	<!DOCTYPE html>
	<html>
	<body>
	<script src="https://www.google.com/recaptcha/api.js?render=INPUT_YOUR_RECAPTCHA_TOKEN"></script>
	<style type="text/css">
	.container {font-size: 0;}
	.box {display: inline-block; font-size: 16px; margin: 0 20px;}
	</style>
	<div class="container">
	<div class="box">
	<h2>sign up</h2>
	<form id="signup-form">
	<div>
	<input type="email" name="username" placeholder="Email">
	</div>
	<div>
	<input type="password" name="password" placeholder="Password">
	</div>
	<div>
	<input type="text" name="given_name" placeholder="Given name">
	</div>
	<div>
	<input type="text" name="family_name" placeholder="Family name">
	</div>
	<input type="submit" value="sign up">
	</form>
	</div>

	<div class="box">
	<h2>sign in</h2>
	<form id="signin-form">
	<div>
	<input type="email" name="username" placeholder="Email">
	</div>
	<div>
	<input type="password" name="password" placeholder="Password">
	</div>
	<input type="submit" value="sign in">
	</form>
	</div>

	<div class="box">
	<h2>sign in challenge</h2>
	<form id="signin-challenge">
	<div>
	<input type="email" name="username" placeholder="Email">
	</div>
	<div id="aikotoba-label" style="display: none;">
	<p>please input 'aikotoba'</p>
	</div>
	<div id="aikotoba" style="display: none;">
	<input type="text" name="aikotoba" placeholder="aikotoba">
	</div>
	<input type="submit" value="sign in">
	</form>
	</div>
	</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
	<script src="dist/bundle.js"></script>
	</body>
	</html>
	const Auth = require('@aws-amplify/auth').Auth;

	const config = {
	aws: {
	region: 'ap-northeast-1',
	cognito: {
	userPoolId: 'INPUT_YOUR_USER_POOL_ID',
	userPoolWebClientId: 'INPUT_YOUR_USER_POOL_WEB_CLIENT_ID',
	},
	},
	recaptcha: {
	siteKey: 'INPUT_YOUR_RECAPTCHA_SECRET_KEY',
	},
	};

	Auth.configure({
	Auth: {
	region: config.aws.region,
	userPoolId: config.aws.cognito.userPoolId,
	userPoolWebClientId: config.aws.cognito.userPoolWebClientId,
	}
	});

	grecaptcha.ready(function () {
	document.getElementById("signup-form").addEventListener("submit", signUp);
	document.getElementById("signin-form").addEventListener("submit", signIn);
	document.getElementById("signin-challenge").addEventListener("submit", signInChallenge);
	});

	async function signUp(event) {
	event.preventDefault();

	const form = event.target;
	const username = form.elements['username'].value;
	const password = form.elements['password'].value;

	try {
	const recaptchaToken = await grecaptcha.execute(config.recaptcha.siteKey, {action: 'signUp'});
	await Auth.signUp({
	username: username,
	password: password,
	attributes: {
	'email': username,
	},
	validationData: {},
	clientMetadata: {
	'recaptchaToken': recaptchaToken,
	},
	});
	alert('Success signed up');
	} catch (err) {
	alert("ERR");
	}
	}

	async function signIn(event) {
	event.preventDefault();

	const form = event.target;
	const username = form.elements['username'].value;
	const password = form.elements['password'].value;

	try {
	const recaptchaToken = await grecaptcha.execute(config.recaptcha.siteKey, {action: 'signIn'});
	const cognitoUser = await Auth.signIn({
	username: username,
	password: password,
	validationData: {
	'recaptchaToken': recaptchaToken,
	},
	});
	console.log(cognitoUser)
	alert('Success signed in');
	} catch (err) {
	console.log(err);
	alert("ERR");
	}
	}

	var cognitoUser = null;

	async function signInChallenge(event) {
	event.preventDefault();

	const form = event.target;
	const username = form.elements['username'].value;

	console.log(cognitoUser);

	if (cognitoUser === null) {
	console.log("start custom challenge.");
	try {
	const recaptchaToken = await grecaptcha.execute(config.recaptcha.siteKey, {action: 'signIn'});
	cognitoUser = await Auth.signIn({
	username: username,
	validationData: {
	'recaptchaToken': recaptchaToken,
	},
	});
	document.getElementById("aikotoba").style.display = "block";
	document.getElementById("aikotoba-label").style.display = "block";
	console.log(cognitoUser)
	} catch (err) {
	console.log(err);
	alert("ERR");
	}
	} else {
	console.log("authorize custom challenge.")
	const aikotoba = form.elements['aikotoba'].value;
	document.getElementById("aikotoba").style.display = "none";
	document.getElementById("aikotoba-label").style.display = "none";
	try {
	const answerResp = await Auth.sendCustomChallengeAnswer(cognitoUser, aikotoba)
	console.log(answerResp)
	alert('Success signed in');
	} catch (err) {
	console.log(err);
	alert("ERR");
	} finally {
	cognitoUser = null
	}
	}
	}
	{
	"name": "front",
	"version": "1.0.0",
	"main": "index.js",
	"scripts": {
	"test": "echo \"Error: no test specified\" && exit 1",
	"build": "webpack",
	"start": "rm -rf dist && webpack && webpack-cli serve --mode development"
	},
	"dependencies": {
	"aws-amplify": "3.0.25"
	},
	"resolutions": {
	"graphql": "^15.0.0"
	},
	"devDependencies": {
	"babel-core": "^6.26.3",
	"babel-loader": "^8.2.2",
	"babel-preset-es2015": "^6.24.1",
	"clean-webpack-plugin": "^3.0.0",
	"util": "^0.12.3",
	"webpack": "^5.21.2",
	"webpack-cli": "^4.5.0",
	"webpack-dev-server": "^3.11.2"
	}
	}