LoginSignup
9
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@ryichk(ry ichk)

Next.js + Amplify + CognitoでSignUpページのUIを自前実装したい

Last updated at Posted at 2021-10-31

はじめに

Next.js(React) + Amplify + Cognitoという技術スタックでWebアプリのUIを開発したいと思い、いくつかの記事を参考にさせていただきました。

提供されているUIライブラリ（@aws-amplify/ui-react）を利用する方法が一番簡単だと思いましたが、
@aws-amplify/ui-reactを利用せず、SignUpページを独自のUIで構築したいと思い、自分なりに調査し、考えて実装してみました。
これより良い実装方法やコードの書き方などいくらでもあると思うので、ぜひコメント等でご教授いただけましたら幸いです。

環境情報

$ node -v
v15.14.0

$ amplify -v
6.1.1

自分が作っているNext.jsアプリのディレクトリ構成を簡略的に示すと下記のようになっています。
（今回載せているコードの必要最小限のディレクトリ構成です）

ディレクトリ構成
app-name/
       ├ amplify/
       ├ public/
       ├ src/
       │   ├ pages/
       │   │     ├ _app.tsx
       │   │     ├ sign-up.tsx ← この記事で実装するのはSignUpだけです。
       │   │     ├ sign-in.tsx ← リンク先に指定しているため念のため記載しています。
       │   │     └ user-profile.tsx ← リダイレクト先に指定しているため念のため記載しています。
       │   │
       │   └ components/
       │              ├ Alerts/
       │              │      ├ ErrorAlert/
       │              │      │          └ index.tsx
       │              │      ├ Alert.d.ts
       │              │      └ index.ts
       │              ├ Button/
       │              │      ├ Button.d.ts
       │              │      └ index.tsx
       │              └ icons/
       ├ package.json       ├ ArrowLeftIcon.tsx
       ├ postcss.config.js  ├ LockIcon.tsx
       ├ tailwind.config.js ├ MailIcon.tsx
       ├ tsconfig.json      ├ MessageIcon.tsx
       └ yarn.lock          ├ UserIcon.tsx
                            ├ icon.d.ts
                            └ index.ts

使用しているnpmは以下の通りです。
（今回載せているコードで使用している必要最小限のnpm一覧です）

package.json
{
  "dependencies": {
    "aws-amplify": "^4.3.3",
    "daisyui": "^1.10.0",
    "next": "^11.1.1",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.14.8",
    "@types/node": "^15.6.1",
    "@types/react": "^17.0.6",
    "@types/react-dom": "^17.0.5",
    "autoprefixer": "^10.3.1",
    "babel-loader": "^8.2.2",
    "postcss": "^8.3.6",
    "tailwindcss": "^2.2.6",
    "typescript": "^4.3.2"
  }
}

TypeScriptの設定

tsconfig.json
tsconfig.json
{
  "compilerOptions": {
    "baseUrl": "src",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "esnext",
    "target": "es6",
    "jsx": "preserve",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true
  },
  "include": [
    "next-env.d.ts",
    "globals.d.ts",
    "src/**/*.ts",
    "src/**/*.tsx"
  ],
  "exclude": ["node_modules", ".next"]
}

UIのスタイリングにTailwindCSS、daisyUIを使用しているので、念のため設定ファイルも載せておきます。

postcss.config.js
postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};
tailwind.config.js
tailwind.config.js
module.exports = {
  purge: ['./src/pages/**/*.tsx', './src/components/**/*.tsx'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    backgroundColor: (theme) => ({
      ...theme('colors'),
      primary: '#81B29A',
      secondary: '#F4F1DE',
      danger: '#E07A5F',
    }),
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [require('daisyui')],
  daisyui: {
    themes: [
      {
        default: {
          primary: '#81B29A',
          'primary-focus': '#719885',
          'primary-content': '#FFFFFF',

          secondary: '#F2CC8F',
          'secondary-focus': '#D5BA90',
          'secondary-content': '#FFFFFF',

          accent: '#E07A5F',
          'accent-focus': '#C68270',
          'accent-content': '#FFFFFF',

          neutral: '#3D4451',
          'neutral-focus': '#2A2E37',
          'neutral-content': '#FFFFFF',

          'base-100': '#F4F1DE',
          'base-200': '#F9FAFB',
          'base-300': '#D1D5DB',
          'base-content': '#3D405B',

          info: '#2094F3',
          success: '#009485',
          warning: '#FF9900',
          error: '#FF5724',
        },
      },
    ],
  },
};

画面設計

実現したいSignUp画面の完成予想図

スクリーンショット 2021-10-31 14.43.22.png

仕様

下記のようにしました。

  • username, email, passwordでSignUp
  • usernameはユニーク
  • usernameは3文字以上30文字以下
  • passwordは12文字以上50文字以下で、大文字・小文字の英字と数字を含めなければならない
  • passwordとconfirm passwordが一致している必要がある
  • バックエンドとフロントエンド両方でバリデーションをかける
  • Emailに認証コードを送信する
  • 認証コードを使ってアカウントを有効化できる

実装

1. AmplifyにAuthを追加

$ amplify add auth
Using service: Cognito, provided by: awscloudformation

 The current configured provider is Amazon Cognito.

 Do you want to use the default authentication and security configuration? Manual configuration
 Select the authentication/authorization services that you want to use: User Sign-Up & Sign-In only (Best used with a cloud API only)
 Please provide a friendly name for your resource that will be used to label this category in the project: appname
 Please provide a name for your user pool: appname_user_pool
 Warning: you will not be able to edit these selections.
 How do you want users to be able to sign in? Username
 Do you want to add User Pool Groups? No
 Do you want to add an admin queries API? No
 Multifactor authentication (MFA) user login options: OPTIONAL (Individual users can use MFA)
 For user login, select the MFA types: SMS Text Message, Time-Based One-Time Password (TOTP)
 Please specify an SMS authentication message: AppName 認証コード：{####}
 Email based user registration/forgot password: Enabled (Requires per-user email entry at registration)
 Please specify an email verification subject: 確認コード | AppName
 Please specify an email verification message: 確認コード：{####}
 Do you want to override the default password policy for this User Pool? Yes
 Enter the minimum password length for this User Pool: 12
 Select the password character requirements for your userpool: Requires Lowercase, Requires Uppercase, Requires Numbers
 Warning: you will not be able to edit these selections.
 What attributes are required for signing up? Email
 Specify the apps refresh token expiration period (in days): 30
 Do you want to specify the user attributes this app can read and write? Yes
 Specify read attributes: Address, Birthdate, Email, Gender, Nickname, Phone Number, Preferred Username, Picture, Profile, Website
 Specify write attributes: Address, Birthdate, Gender, Nickname, Phone Number, Preferred Username, Picture, Profile, Website
 Do you want to enable any of the following capabilities?
 Do you want to use an OAuth flow? No
 Do you want to configure Lambda Triggers for Cognito? No
Successfully added auth resource appname locally

$ amplify push

2. _app.tsxにAmplifyの設定を追加

src/pages/_app.tsx
import { Amplify } from 'aws-amplify'; // 追加
import { NextPage } from 'next';
import { AppProps } from 'next/app';
import awsExports from '../aws-exports'; // 追加
import 'tailwindcss/tailwind.css';

Amplify.configure({ ...awsExports, ssr: true }); // 追加

const MyApp: NextPage<AppProps> = ({ Component, pageProps }: AppProps) => {
  return <Component {...pageProps} />;
};

export default MyApp;

3. SignUpページのUI実装

こんな感じにしてみました。

src/pages/sign-up.tsx
import { NextPage } from 'next';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { useState, useEffect } from 'react';

import { Button } from '../../components';
import { ErrorAlert } from '../../components/Alerts';
import { ArrowLeftIcon, LockIcon, MailIcon, MessageIcon, UserIcon } from '../../components/icons';

const SignUp: NextPage = () => {
  const [username, setUsername] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [code, setCode] = useState('');
  const [isSubmitted, setIsSubmitted] = useState(false);
  const [isError, setIsError] = useState(false);
  const [errorMessage, setErrorMessage] = useState('');
  const [user, setUser] = useState();
  const router = useRouter();

  return (
    <>
      {isError ? <ErrorAlert message={errorMessage} /> : <></>}
      {isSubmitted ? (
        <div className='card bg-white shadow-2xl w-96 p-10 m-auto sm:mt-10'>
          <div className='form-control'>
            <div className='flex m-1 p-2'>
              <label className='label'>
                <UserIcon classes='h-6 w-6 text-primary' />
              </label>
              <input
                name='username'
                type='text'
                placeholder='username'
                className='bg-white ml-1 p-2'
                value={username}
                onChange={handleInputChange}
              />
            </div>
            <div className='flex m-1 mb-10 p-2'>
              <label className='label'>
                <MessageIcon classes='h-6 w-6 text-primary' />
              </label>
              <input
                name='code'
                type='text'
                placeholder='verification code'
                className='bg-white ml-1 p-2'
                value={code}
                onChange={handleInputChange}
              />
            </div>
          </div>
          <Button size='large' label='activate account' onClick={confirmSignUp} />
        </div>
      ) : (
        <>
          <div className='card bg-white shadow-2xl w-96 p-10 m-auto sm:mt-10'>
            <div className='form-control'>
              <div className='mb-20'>
                <Link href='/'>
                  <a>
                    <ArrowLeftIcon classes='h-5 w-5' />
                  </a>
                </Link>
              </div>
              <div className='flex m-1 p-2'>
                <label className='label'>
                  <UserIcon classes='h-6 w-6 text-primary' />
                </label>
                <input
                  name='username'
                  type='text'
                  placeholder='username'
                  className='bg-white ml-1 p-2'
                  value={username}
                  onChange={handleInputChange}
                />
              </div>
              <div className='flex m-1 p-2'>
                <label className='label'>
                  <MailIcon classes='h-6 w-6 text-primary' />
                </label>
                <input
                  name='email'
                  type='email'
                  placeholder='user@email.com'
                  className='bg-white ml-1 p-2'
                  value={email}
                  onChange={handleInputChange}
                />
              </div>
              <div className='flex m-1 p-2'>
                <label className='label'>
                  <LockIcon classes='h-6 w-6 text-primary' />
                </label>
                <input
                  name='password'
                  type='password'
                  placeholder='password'
                  className='bg-white ml-1 p-2'
                  value={password}
                  onChange={handleInputChange}
                />
              </div>
              <div className='flex m-1 mb-10 p-2'>
                <label className='label'>
                  <LockIcon classes='h-6 w-6 text-primary' />
                </label>
                <input
                  name='confirmPassword'
                  type='password'
                  placeholder='confirm password'
                  className='bg-white ml-1 p-2'
                  value={confirmPassword}
                  onChange={handleInputChange}
                />
              </div>
            </div>
            <Button size='large' label='create user' onClick={signUp} />
          </div>
          <div className='mt-10 text-center'>
            <p>Already have an account?</p>
            <div className='mt-2'>
              <Link href='/sign-in'>
                <a>
                  <Button btnColor='btn-secondary' size='medium' label='sign in' />
                </a>
              </Link>
            </div>
          </div>
        </>
      )}
    </>
  );
};

export default SignUp;

※ ButtonコンポーネントやErrorAlertコンポーネント、それぞれのiconコンポーネントに関してはコードを割愛します。
ButtonコンポーネントはTailwindCSSでUIを構築しています。
ErrorAlertコンポーネントはdaisyUIのAlertを活用しています。
それぞれのiconコンポーネントはheroiconsを活用しています。

4. 関数の実装

仕様を満たすための関数を実装していきます。

  • handleInputChange
    • inputの入力値をそれぞれのstateにセットする関数
  • isValidUsername
    • 入力されたusernameが有効値かどうか判定する関数
  • isValidPassword
    • 入力されたpasswordが有効値かどうか判定する関数

handleInputChange

src/pages/sign-up.tx
const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
  const { target } = event;
  if (!(target instanceof HTMLInputElement)) return;

  const { name, value } = target;

  switch (name) {
    case 'username':
      setUsername(value);
      break;
    case 'email':
      setEmail(value);
      break;
    case 'password':
      setPassword(value);
      break;
    case 'confirmPassword':
      setConfirmPassword(value);
      break;
    case 'code':
      setCode(value);
      break;
  }
};

isValidUsername

src/pages/sign-up.tsx
const isValidUsername = (): boolean => {
  if (username.length < 3 || username.length > 30) {
    setErrorMessage('usernameは3文字以上, 30文字以下にしてください。');
    return false;
  } else {
    setErrorMessage('');
    return true;
  }
};

isValidPassword

正規表現に関しては下記を参考にしました。
JavaScriptで文字列が小文字・大文字・数字を全て含むかどうか判定する方法について

src/pages/sign-up.tsx
const isValidPassword = (): boolean => {
  const regexPassword = /^(?=.*?[a-z])(?=.*?[A-Z])(?=.*?[0-9])/;
  if (!regexPassword.test(password)) {
    setErrorMessage('passwordには大文字・小文字の英字と数字を含めてください。');
    return false;
  } else if (password.length < 12 || password.length > 50) {
    setErrorMessage('passwordは12文字以上, 50文字以下にしてください。');
    return false;
  } else if (password !== confirmPassword) {
    setErrorMessage('passwordとconfirm passwordが一致していません。');
    return false
  } else {
    setErrorMessage('');
    return true;
  }
};

5. SignUp処理の実装

aws-amplifyのAuthを使ってSignUp処理とConfirmSignUp処理を実装します。
参考：Amplify Docs | Authentication | Sign up, Sign in & Sign out

signUp関数が呼ばれたときにusernameとpasswordのバリデーションが走ります。
isValidUsername関数とisValidPassword関数はbooleanが返ってくるので、両方trueになったときのみSignUpされます。
どちらかでもバリデーションエラーになった場合（falseが返って来た場合）isErrorステートがtrueになりアラートが表示されます。

src/pages/sign-up.tsx
import { Auth } from 'aws-amplify';

const signUp = async (): Promise<void> => {
  try {
    if (isValidUsername() && isValidPassword()) {
      await Auth.signUp({
        username,
        password,
        attributes: {
          email,
        },
      });
      setIsError(false);
      setIsSubmitted(true);
    } else {
      setIsError(true);
    }
  } catch (error) {
    switch (error.name) {
      case 'UsernameExistsException':
        setErrorMessage('すでに登録済みのユーザー名のため使えません。');
        break;
      default:
        setErrorMessage(`${error}`);
        break;
    }

    setIsError(true);
  }
};

const confirmSignUp = async (): Promise<void> => {
  try {
    await Auth.confirmSignUp(username, code);
    await Auth.signIn({ username, password });
    router.push('/user-profile');
  } catch (error) {
    setErrorMessage(`${error}`);
    setIsError(true);
  }
};

6. リダイレクト処理

最後に、ユーザーがSignIn済みだった場合、UserProfileページにリダイレクトするようにしました。
※ 実装中にメモリリークが発生したため下記の記事を参考にしました。
React useEffect メモリーリーク防止 Tip

src/pages/sign-up.tsx
useEffect(() => {
    const abortController = new AbortController();
    const init = async () => {
      try {
        const currentUser = await Auth.currentAuthenticatedUser();
        setUser(currentUser);
      } catch (error) {
        console.log(error);
      }
    };
    init();

    if (user) {
      router.push('/user-profile');
    }

    return () => {
      abortController.abort();
    };
  }, [user]);

完成形のコード

src/pages/sign-up.tsx
src/pages/sign-up.tsx
import { Auth } from 'aws-amplify';
import { NextPage } from 'next';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { useState, useEffect } from 'react';

import { Button } from '../../components';
import { ErrorAlert } from '../../components/Alerts';
import { ArrowLeftIcon, LockIcon, MailIcon, MessageIcon, UserIcon } from '../../components/icons';

const SignUp: NextPage = () => {
  const [username, setUsername] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [code, setCode] = useState('');
  const [isSubmitted, setIsSubmitted] = useState(false);
  const [isError, setIsError] = useState(false);
  const [errorMessage, setErrorMessage] = useState('');
  const [user, setUser] = useState();
  const router = useRouter();

  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
    const { target } = event;
    if (!(target instanceof HTMLInputElement)) return;

    const { name, value } = target;

    switch (name) {
      case 'username':
        setUsername(value);
        break;
      case 'email':
        setEmail(value);
        break;
      case 'password':
        setPassword(value);
        break;
      case 'confirmPassword':
        setConfirmPassword(value);
        break;
      case 'code':
        setCode(value);
        break;
    }
  };

  const isValidUsername = (): boolean => {
    if (username.length < 3 || username.length > 30) {
      setErrorMessage('usernameは3文字以上, 30文字以下にしてください。');
      return false;
    } else {
      setErrorMessage('');
      return true;
    }
  };

  const isValidPassword = (): boolean => {
    const regexPassword = /^(?=.*?[a-z])(?=.*?[A-Z])(?=.*?[0-9])/;
    if (!regexPassword.test(password)) {
      setErrorMessage('passwordには大文字・小文字の英字と数字を含めてください。');
      return false;
    } else if (password.length < 12 || password.length > 50) {
      setErrorMessage('passwordは12文字以上, 50文字以下にしてください。');
      return false;
    } else if (password !== confirmPassword) {
      setErrorMessage('passwordとconfirm passwordが一致していません。');
      return false;
    } else {
      setErrorMessage('');
      return true;
    }
  };

  const signUp = async (): Promise<void> => {
    try {
      if (isValidUsername() && isValidPassword()) {
        await Auth.signUp({
          username,
          password,
          attributes: {
            email,
          },
        });
        setIsError(false);
        setIsSubmitted(true);
      } else {
        setIsError(true);
      }
    } catch (error) {
      switch (error.name) {
        case 'UsernameExistsException':
          setErrorMessage('すでに登録済みのユーザー名のため使えません。');
          break;
        default:
          setErrorMessage(`${error}`);
          break;
      }

      setIsError(true);
    }
  };

  const confirmSignUp = async (): Promise<void> => {
    try {
      await Auth.confirmSignUp(username, code);
      await Auth.signIn({ username, password });
      router.push('/user-profile');
    } catch (error) {
      setErrorMessage(`${error}`);
      setIsError(true);
    }
  };

  useEffect(() => {
    const abortController = new AbortController();
    const init = async () => {
      try {
        const currentUser = await Auth.currentAuthenticatedUser();
        setUser(currentUser);
      } catch (error) {
        console.log(error);
      }
    };
    init();

    if (user) {
      router.push('/user-profile');
    }

    return () => {
      abortController.abort();
    };
  }, [user]);

  return (
    <>
      {isError ? <ErrorAlert message={errorMessage} /> : <></>}
      {isSubmitted ? (
        <div className='card bg-white shadow-2xl w-96 p-10 m-auto sm:mt-10'>
          <div className='form-control'>
            <div className='flex m-1 p-2'>
              <label className='label'>
                <UserIcon classes='h-6 w-6 text-primary' />
              </label>
              <input
                name='username'
                type='text'
                placeholder='username'
                className='bg-white ml-1 p-2'
                value={username}
                onChange={handleInputChange}
              />
            </div>
            <div className='flex m-1 mb-10 p-2'>
              <label className='label'>
                <MessageIcon classes='h-6 w-6 text-primary' />
              </label>
              <input
                name='code'
                type='text'
                placeholder='verification code'
                className='bg-white ml-1 p-2'
                value={code}
                onChange={handleInputChange}
              />
            </div>
          </div>
          <Button size='large' label='activate account' onClick={confirmSignUp} />
        </div>
      ) : (
        <>
          <div className='card bg-white shadow-2xl w-96 p-10 m-auto sm:mt-10'>
            <div className='form-control'>
              <div className='mb-20'>
                <Link href='/'>
                  <a>
                    <ArrowLeftIcon classes='h-5 w-5' />
                  </a>
                </Link>
              </div>
              <div className='flex m-1 p-2'>
                <label className='label'>
                  <UserIcon classes='h-6 w-6 text-primary' />
                </label>
                <input
                  name='username'
                  type='text'
                  placeholder='username'
                  className='bg-white ml-1 p-2'
                  value={username}
                  onChange={handleInputChange}
                />
              </div>
              <div className='flex m-1 p-2'>
                <label className='label'>
                  <MailIcon classes='h-6 w-6 text-primary' />
                </label>
                <input
                  name='email'
                  type='email'
                  placeholder='user@email.com'
                  className='bg-white ml-1 p-2'
                  value={email}
                  onChange={handleInputChange}
                />
              </div>
              <div className='flex m-1 p-2'>
                <label className='label'>
                  <LockIcon classes='h-6 w-6 text-primary' />
                </label>
                <input
                  name='password'
                  type='password'
                  placeholder='password'
                  className='bg-white ml-1 p-2'
                  value={password}
                  onChange={handleInputChange}
                />
              </div>
              <div className='flex m-1 mb-10 p-2'>
                <label className='label'>
                  <LockIcon classes='h-6 w-6 text-primary' />
                </label>
                <input
                  name='confirmPassword'
                  type='password'
                  placeholder='confirm password'
                  className='bg-white ml-1 p-2'
                  value={confirmPassword}
                  onChange={handleInputChange}
                />
              </div>
            </div>
            <Button size='large' label='create user' onClick={signUp} />
          </div>
          <div className='mt-10 text-center'>
            <p>Already have an account?</p>
            <div className='mt-2'>
              <Link href='/sign-in'>
                <a>
                  <Button btnColor='btn-secondary' size='medium' label='sign in' />
                </a>
              </Link>
            </div>
          </div>
        </>
      )}
    </>
  );
};

export default SignUp;

参考記事一覧

9
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
9
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?