ふんばりフロントエンジニアのブログ

新米フロントエンジニアの備忘録です。ふんばり温泉タオル欲しい...

CognitoのライブラリはもうやめてAmplify使おうっていう話

最近Cognitoでユーザー認証して、各ユーザーグループに応じて叩けるAppSyncのクエリやらミューテーションやら変えたいな、という局面が出てきました。

ちょっとCognitoでユーザー認証する流れが初めてだったので色々調べてたんですが、結構最近の記事でもCogitoのライブラリ(SDKと言った方がいい?)「amazon-cognito-js」を使って実装してるものが多かった印象です。

AmplifyはCogitoやらAppSyncやら色々ひとまとめにしてくれているAWSサービスなのでそっち使った方がかなり楽できました。

ということでログイン処理を実装するまでの一例。

require('amazon-cognito-js');
const AmazonCognitoIdentity = require('amazon-cognito-identity-js');
const AWS = require('aws-sdk');

const POOL_DATA = {
  UserPoolId: 'ap-northeast-1_xxxxxxx',
  ClientId: 'xxxxxxxxxxxxxxxxxxxxxxxxx',
};

const login = () => {
    const inputData = userData;
    const authenticationData = {
      Username: inputData.username,
      Password: inputData.password
    };

    const authenticationDetails = new AmazonCognitoIdentity.AuthenticationDetails(authenticationData);
    const userDatas = {
      Username: inputData.username,
      Pool: new AmazonCognitoIdentity.CognitoUserPool(POOL_DATA),
    };

    const CognitoUser = new AmazonCognitoIdentity.CognitoUser(userDatas);

    CognitoUser.authenticateUser(authenticationDetails, {
      onSuccess: (result) => {
        const accessToken = result.getAccessToken().getJwtToken();
        console.log(result);
        console.log(accessToken);
      },
      onFailure: (err) => {
        console.log(err);
      },
    });

  }

cogitoのライブラリを使う場合は上記のような感じです。めっちゃ長いですよね。

import Amplify, { Auth} from 'aws-amplify';
import awsconfig from './aws-exports';

Amplify.configure(awsconfig);

const login = async() => {
  const res = await Auth.signIn('test', 'password');
}

amplify使うとこんな感じ。めちゃくちゃ短い。

また、AppSyncを使う際にも便利です。

import Amplify, {API, graphqlOperation} from 'aws-amplify';
import awsmobile from './aws-exports';

Amplify.configure(awsmobile);

const executeQuery = async (query, input = null) {
    return await API.graphql(graphqlOperation(query, input)).catch( (err) => err);
  }

queryに、そのままクエリを入れると動きます。めっちゃ簡単ですよね。

とにかく新しいサービスは一旦使ってみるのがいいですよね、というお話でした。