GraphQL

【GraphQL】Prismaを使って、ログイン機能を追加する

作成日：2021年11月25日

更新日：2021年11月26日

前回は、パスワードをハッシュ化しました。

【GraphQL】パスワードをハッシュ化する

今回は、Prisma を使って、ログイン機能を追加します。

コードは、前回のコードを使用します。

まずは、ログイン機能のスキーマを作成します。

schema.ts のMutationにsigninを作成します。

signinの指定は、signupと同じにします。

ts
type Mutation {
  addBook(input: AddBookInput!): BookPayload!
  deleteBook(id: Int!): BookPayload!
  updateBook(id: Int!, input: UpdateBookInput!): BookPayload!
  signup(email: String!, password: String!): AuthPayload!
  signin(email: String!, password: String!): AuthPayload!
}

スキーマが完成したので、次はリゾルバーを作成します。

resolvers フォルダの Mutation.ts を開きます。

Mutation に signin を作成します。

ts
signin: async (_:any, {email, password}: MutationUser, { prisma }: Context): Promise<UserPayload> => {
},

PostgresSQL データのemailと、入力したメールアドレスが正しいか確認します。

まずは、emailを指定して、ユーザー情報を取得します。

ts
signin: async (_:any, {email, password}: MutationUser, { prisma }: Context): Promise<UserPayload> => {
  const user = await prisma.user.findUnique({
    where: {
      email
    }
  });
},

ユーザーが存在しない場合、エラーメッセージを返すようにします。

ts
signin: async (_:any, {email, password}: MutationUser, { prisma }: Context): Promise<UserPayload> => {
  const user = await prisma.user.findUnique({
    where: {
      email
    }
  });

  if(!user) {
    return {
      errors: [
        {
        message: "アカウント情報が間違っています"
        }
      ],
      user: null,
    }
  }
},

次に、パスワードが正しいかどうか確認します。

パスワードがハッシュ化されているので、bcryptのcompareを使って確認します。

compare の第一引数に入力した password、第二引数にuserのpasswordを指定します。

ts
signin: async (_:any, {email, password}: MutationUser, { prisma }: Context): Promise<UserPayload> => {
  const user = await prisma.user.findUnique({
    where: {
      email
    }
  });

  if(!user) {
    return {
      errors: [
        {
        message: "アカウント情報が間違っています"
        }
      ],
      user: null,
    }
  }

  const comparePassword = await bcrypt.compare(password, user.password);
  },

パスワードが間違っていれば、エラーメッセージを返すようにします。

ts
signin: async (_:any, {email, password}: MutationUser, { prisma }: Context): Promise<UserPayload> => {
  const user = await prisma.user.findUnique({
    where: {
      email
    }
  });

  if(!user) {
    return {
      errors: [
        {
        message: "アカウント情報が間違っています"
        }
      ],
      user: null,
    }
  }

  const comparePassword = await bcrypt.compare(password, user.password);

  if (!comparePassword) {
    return {
      errors: [
        {
          message: "パスワードが間違っています",
        },
      ],
      user: null,
    };
  }
},

emailとpasswordが問題なければ、空のエラーメッセージとuserを返します。

では、ブラウザで確認しましょう。

GraphQL で、Signinのmutationを作成します。

graphql
mutation Signin($email: String!, $password: String!) {
  signin(email: $email, password: $password) {
    errors {
      message
    }
    user {
      email
      password
    }
  }
}