前回は、Prismaを使って、PostgresSQLデータを追加や削除、更新しました。

今回は、ユーザー登録します。

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

ユーザーデータをPostgresSQLに登録する

まずは、Userのモデルを作成します。

prismaフォルダのschema.prismaを開きます。

Bookと同様に、Userモデルを作成します。

内容は、ID、E-mail、パスワード、作成日、更新日を指定します。

また、E-mailはユーザー間で重複することがないので、uniqueを設定します。

model User {
  id         Int      @id @default(autoincrement())
  email      String   @unique
  password   String   
  createdAt  DateTime @default(now())
  updatedAt  DateTime @updatedAt
}

モデルが完成したので、ターミナルで、npx prisma db pushを実行します。

モデルをプッシュすることができたら、npx prisma studioで確認します。

『+』ボタンをクリックして、Userを追加します。

image2

image3

Userの空データが追加されました。

次に、スキーマを作成します。

schema.tsでUserスキーマを作成します。

type User {
  id: Int!
  email: String!
  password: String!
}

ユーザー登録のためのMutationを作成します。

signupを作成し、emailpasswordを指定します。

型は、Userとします。

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

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

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

signupを作成します。

argsにはemailとpassword、contextにはprismaを指定します。

signup: async (_, {email, password}, { prisma }) => {
}

Userの型を作成します。

type MutationUser = {
  email: string;
  password: string;
}
signup: async (_:any, {email, password}: MutationUser, { prisma }: Context) => {
}

prismaのcreateで、emailpasswordのデータを追加するように設定します。

signup: async (_:any, {email, password}: MutationUser, { prisma }: Context) => {
  return prisma.user.create({ data: {
    email, 
    password,
  }})
}

リゾルバーが完成したので、ブラウザでユーザーを登録してみましょう。

mutation Signup($email: String!, $password: String!) {
  signup(email: $email, password: $password) {
    email
    password
  }
}

image4

Variablesにemailとpasswordを入力します。

Signupをクリックすると、

image5

データが送信できました。

Prisma Studioで確認しましょう。

image6

emailとpasswordが追加されました。

E-mailとパスワードを検証する

データを追加することができましたが、emailとpasswordは、どんな文字列でも追加できてしまいます。

emailはE-mailの内容になっているか、パスワードは何文字以上かを検証するために、validatorというライブラリを使用します。

ターミナルで、npm install --save validator @types/validatorを実行します。

次に、エラーメッセージのスキーマを作成します。

schema.tsにAuthPayloadを作成します。

type AuthPayload {
  errors: [Error!]!
  user: User
}

Mutationsignupの型をUserからAuthPayloadへ変更します。

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

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

resolversのMutation.tsを開きます。

validatorをインポートします。

import validator from "validator";

Signupの型を作成しておきます。

type UserPayload = {
  errors: {
    message: string;
  }[];
  user: User | null;
};

validatorのisEmailを使って、emailがE-mailとして正しいかどうか検証します。

isEmailが正しくない場合、エラーメッセージを返すようにしましょう。

signup: async (_:any, {email, password}: MutationUser, { prisma }: Context): Promise<UserPayload> => {
  const isEmail = validator.isEmail(email);

  if(!isEmail) {
    return {
      errors: [{
        message: "emailが正しくありません"
      }],
      user: null
    }
  }

    return prisma.user.create({ data: {
    email, 
    password,
  }})
}

何文字以上のパスワードを有効にするかは、validatorのisLengthを使用します。

今回は、4文字以上を有効にします。

また、isPasswordが正しくない場合、エラーメッセージを返すようにしましょう。

signup: async (_:any, {email, password}: MutationUser, { prisma }: Context): Promise<UserPayload> => {
  const isEmail = validator.isEmail(email);

  if(!isEmail) {
    return {
      errors: [{
        message: "emailが正しくありません"
      }],
      user: null
    }
  }

    const isPassword = validator.isLength(password, {
    min: 4,
  })

  if (!isPassword) {
    return {
      errors: [
        {
          message: "4文字上のパスワードを入力してください",
        },
      ],
      user: null,
    };
  }

    return prisma.user.create({ data: {
    email, 
    password,
  }})
}

エラーメッセージを返すように修正します。

signup: async (_:any, {email, password}: MutationUser, { prisma }: Context): Promise<UserPayload> => {
  const isEmail = validator.isEmail(email);

  if(!isEmail) {
    return {
      errors: [{
        message: "emailが正しくありません"
      }],
      user: null
    }
  }

  const isPassword = validator.isLength(password, {
    min: 4,
  })

  if (!isPassword) {
    return {
      errors: [
        {
          message: "4文字上のパスワードを入力してください",
        },
      ],
      user: null,
    };
  }

  const newUser = await prisma.user.create({ 
    data: {
      email, 
      password,
    }
  })

  return {
    errors: [],
    user: newUser,
  }
}

リゾルバーが完成したので、ブラウザで確認しましょう。

mutation Signup($email: String!, $password: String!) {
  signup(email: $email, password: $password) {
    errors {
      message
    }user {
      email
      password
    }
  }
}

試しに、適当なemailにしてみます。

image7

Signupボタンをクリックすると、

image8

エラーメッセージが返ってきました。

次に、パスワードを1文字にしてみます。

image9

Signupボタンをクリックすると、

image10

こちらもエラーメッセージが返ってきました。

正しいemailとpasswordでは、

image11

正常に登録できました。

Prisma Studioで確認すると、

image12

正しいデータのみPostgresSQLに追加することができました。

コードの全文は、以下の通りです。

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

ブログ一覧