Amplifyを使わずにCognitoを使ってAuth機能を作る

タイトルはちょっと嘘

ここでも解説されている

AWS上の設定

User Poolを作成

Id Poolを作成

雑な手順

$ @aws-amplify/auth

適当に設定を書く

code:src/features/auth/config.ts

import { browserEnv } from 'app/src/features/env/browser';

export const awsConfig = {

identityPoolId: browserEnv.NEXT_PUBLIC_COGNITO_IDENTITYPOOLID,

region: browserEnv.NEXT_PUBLIC_COGNITO_REGION,

userPoolId: browserEnv.NEXT_PUBLIC_COGNITO_USERPOOLID,

userPoolWebClientId: browserEnv.NEXT_PUBLIC_COGNITO_USERPOOLWEBCLIENTID,

};

とりあえずrequiredの項目だけ書けばいい

適当にinitialize関数を書く

code:ts

import { Auth } from '@aws-amplify/auth';

import { awsConfig } from './config';

export const initialize = () => Auth.configure({ Auth: awsConfig });

export { Auth };

適当にrepositoryを書く

code:src/features/auth/repositories.ts

import { Auth } from './';

export async function signIn(

username: string,

password: string,

): Promise<AccessToken> {

try {

const user = await Auth.signIn(username, password);

console.info('Auth SignIn Success');

return user.signInUserSession.accessToken.jwtToken;

} catch (err) {

console.info('Auth SignIn Failed');

throw Error('ログインに失敗しました');

}

}

export async function signOut() {

try {

await Auth.signOut();

console.info('Auth SignOut Success');

} catch (err) {

throw new Error('ログアウトに失敗しました');

}

}

適当にhooksを書く

code:src/features/auth/useAuth.ts

import { signOut, signIn } from './repositories';

import { initialize } from '.';

initialize();

export const useAuth = () => {

return {

signIn,

signOut,

};

};

適当にviewを作れば終わり