Next.js14とDjango5で作る！認証システム構築入門(前編)においてアカウント仮登録でサインアップに失敗したと出てしまう

受付中

Next.js

kaito_study

2024/07/24 08:25

実現したいこと

仮登録画面に行きたい

発生している問題

サインアップに失敗したとでてしまう

ソースコード

"use server"

interface TemporarrySignupProps {
    name: string
    email: string
    password: string
    rePassword: string
  }

  // アカウント仮登録
export const temporarrySignup = async ({
    name,
    email,
    password,
    rePassword,
  }: TemporarrySignupProps) => {
    try {
        const body = JSON.stringify({
            name,
            email,
            password,
            re_password: rePassword,
        })

    //アカウント仮登録を送信
        const apiRes = await fetch(`${process.env.API_URL}/api/auth/users/`,{
            method: "POST",
            headers: {
                "Content-Type": "application/json",
            },
            body,
        })

    //APIレスポンスが正常でない場合、失敗を返す
    if (!apiRes.ok) {
        return{
            success: false
         }
    }

    //成功を返す
    return{
        succes: true,
    }
  } catch (error) {
    console.error(error)
    //エラー発生時に、失敗を返す
    return {
        success:false,
    }
  }
}

自分で試したこと

ネット環境を変える、サーバーの再起動

補足情報

回答 3件

回答するにはログインが必要です

はる@講師

10か月前

ご質問ありがとうございます。
Next.jsで動作確認する前に、PostmanでDjangoのAPIが正しく動作しているか確認してみてください
おそらく、Django側のコードがどこか間違っている可能性があります。
https://zenn.dev/hathle/books/next-drf-auth-book/viewer/09_api

よろしくお願いします。

kaito_study

9か月前

返信ありがとうございます。また期間が空いてしまい申し訳ございません。

一度全て1から作り直し、postmanで問題なく動くことを確認してアカウント仮登録を行ったところ、やはりサインアップに失敗したと出てしまいました。しかし、djangog側のターミナルに仮登録完了メッセージが届いており、next.js側もエラーが全く出ていない状況です。

僕自身が何か重大な見落としをしていたら本当に申し訳ないですが、他に何か原因はありますでしょうか？また、ここは一旦無視してとりあえず次に進んでしまう方が良いでしょうか？

よろしくお願いします。

はる@講師

9か月前

Postmanで本登録までうまくいきますでしょうか
Postmanで本登録までうまくいったのであれば、Djangoは問題ないです。
Next.js側のコードに問題がありそうです。

本登録までできて、ログインができない場合は、パスワードを複雑にして登録してみてください

"use server" interface TemporarrySignupProps { name: string email: string password: string rePassword: string } // アカウント仮登録 export const temporarrySignup = async ({ name, email, password, rePassword, }: TemporarrySignupProps) => { try { const body = JSON.stringify({ name, email, password, re_password: rePassword, }) //アカウント仮登録を送信 const apiRes = await fetch(`${process.env.API_URL}/api/auth/users/`,{ method: "POST", headers: { "Content-Type": "application/json", }, body, }) //APIレスポンスが正常でない場合、失敗を返す if (!apiRes.ok) { return{ success: false } } //成功を返す return{ succes: true, } } catch (error) { console.error(error) //エラー発生時に、失敗を返す return { success:false, } } }