next-authを使用する方法や

https://zenn.dev/hathle/books/next-drf-blog-auth-book

react-google-loginを使用する方法などありますので、参考にしてみてください。

https://qiita.com/cokemaniaIIDX/items/41b268c87b7344fbb3c1

はる@講師

### 実現したいこと
現在、Instagram風投稿サイトの動画参考にログインを実装しており、
それに加え、django-allauthを使ってGoogleからもログインできるようにしたいと考えています。

### 発生している問題
現在Next.jsを通してGoogleでログインをするところまではできているのですが、
そこからGoogleのsession情報とCustomUserのユーザー情報を紐づける方法がわからず、質問させていただきました。


### 試したこと
イメージとしては、googleにログイン後、TokenObtainPairViewにアクセスしてログインするのかと考えましたが、パスワード情報がないのでログインできない。

アクセストークンが発行されるのでそれをつかって、ユーザー情報を取得しようとしたが、ユーザー情報を取ってこれなかった。

アドバイス頂けると幸いです。
よろしくおねがいします。

いつも楽しく学習させていただいております。   
zennで購入したインスタ風画像投稿サイト構築チュートリアルを実施するためにyoutubeでDjango + NextJS + Stripeサブスク有料会員サイト構築チュートリアル1(アカウント認証編)を参考に実装を進めている際にエラーにハマりましたのでご質問させてください。

### 実現したいこと

fetchでDRFで作成した新規登録API（api/auth/register）を叩けるようにしたい。

### 発生している問題

```
// NEXT_PUBLIC_API_URL=http://127.0.0.1:8000 は.envに定義しております。

const apiRes = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/auth/register/`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json',
        },
        body: body
```


以上のコードを実施したときにエラー内容が出力されます。


### エラー内容

```
 TypeError: fetch failed
     at Object.fetch (node:internal/deps/undici/undici:11457:11)
     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
     at async register_api (webpack-internal:///(api)/./pages/api/account/register.tsx:19:28) {
   cause: Error: connect ECONNREFUSED 127.0.0.1:8000
       at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1532:16) {
     errno: -111,
     code: 'ECONNREFUSED',
     syscall: 'connect',
     address: '127.0.0.1',
     port: 8000
   }
 }
```

### ソースコード

https://github.com/Masaya00/InstaLike/blob/master/frontend/insta/pages/api/account/register.tsx#L12-L43


### 自分で試したこと

① http://127.0.0.1:8000/api/auth/register/ をPostmanで叩いた際は問題なく新規登録を行えることを確認しています。

② 以下のように127.0.0.1が起動していることは確認しております。

```
% netstat -n | grep '127.0.0.1'
tcp4       0      0  127.0.0.1.8000         127.0.0.1.62993        ESTABLISHED
tcp4       0      0  127.0.0.1.62993        127.0.0.1.8000         ESTABLISHED
・
・
・
```

③ jsonplaceholderの内容をfetchで取得することはできました。

④ http://127.0.0.1:8000/api/auth/user をfetchで取得しようとした際にも今回と同様のエラーが発生しました。


### 補足情報

typescriptを利用し、環境構築はdockerで行なっておりますので、動画内のソースコードと全てが同じというわけではありません。ご容赦ください。

Django側とNextJS側の連携が上手くいっていないだけのようなのですが、原因が突き止められておりません。  
もしこのエラー内容に心当たりがありましたら、ご教授いただきたいです。

※当方、Djangoの知見はそれなりにあるのですが、Next.jsに関しては素人です。

お忙しいところ大変恐縮ですが、ご返信いただけましたら幸いです。  
これからの動画投稿、執筆活動のご健闘をお祈りしています。

Next.js

Django + NextJS + Stripeサブスク有料会員サイト構築チュートリアル1(アカウント認証編)で新規登録時にfetchでDRFのAPIが取得できない。

まさや

### 実現したいこと
バックエンドはハル先生の<a href="https://youtu.be/pPvPX8kXh7w" _blank=true>動画</a>
を参考にして、フロントサイドはハル先生のサブスク有料会員の動画を参考にしてwebアプリを作っています。なんとかuser_createで仮登録機能は実装できたのですが、activationで本登録をする為の方法が全く思い浮かびません、そして色々調べてみたのですが3日ほど答えを見つけられずにいます。もし、activationによる本登録がpostmanを使わずにnext.jsとDjangoなどで可能でしたらやり方を教えていただきたいです。

### 発生している問題
Djoserのactivationを使っての本登録のやり方が全くわからない。

### ソースコード
バックエンドはハル先生の<a href="https://youtu.be/pPvPX8kXh7w" _blank=true>この動画</a>とほとんど同じです。
<p>Reactサイド</p>

```pages/api/account/register.js
export default async(req, res) => {
    if(req.method === 'POST'){
        const { name, email, password, re_password } = req.body
        const body=JSON.stringify({
            name,
            email,
            password,
            re_password,
        })
        try{
            const apiRes = await fetch(`${process.env.NEXT_PUBLIC_API_URL}api/auth/users/`,{
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: body,
            })
            const data = await apiRes.json()
            if (apiRes.status === 201){
                return res.status(200).json({
                    success: 'Account registration is successed!',
                })
            }else{
                return res.status(apiRes.status).json({
                    error: 'We failed to register your account',
                })
            }
        }catch(err){
            return res.status(500).json({
                error: 'We failed to register your account',
            })
        }
    }else{
        res.setHeader('Allow', ['POST'])
        return res.status(405).json({ error: `Method ${req.method} not allowded.` })
    }
}
```

```pages/register.js
export default async(req, res) => {
    if(req.method === 'POST'){
        const { name, email, password, re_password } = req.body
        const body=JSON.stringify({
            name,
            email,
            password,
            re_password,
        })
        try{
            const apiRes = await fetch(`${process.env.NEXT_PUBLIC_API_URL}api/auth/users/`,{
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: body,
            })
            const data = await apiRes.json()
            if (apiRes.status === 201){
                return res.status(200).json({
                    success: 'Account registration is successed!',
                })
            }else{
                return res.status(apiRes.status).json({
                    error: 'We failed to register your account',
                })
            }
        }catch(err){
            return res.status(500).json({
                error: 'We failed to register your account',
            })
        }
    }else{
        res.setHeader('Allow', ['POST'])
        return res.status(405).json({ error: `Method ${req.method} not allowded.` })
    }
}
```
### 自分で試したこと
Googleで日本語と英語で調べまくる。
Chat GPTに聞いてみる。

### 補足情報
いつもお世話になっております。

Django

DRF+Djoser+Next.jsでDjoserのactivationを実装したい

KosKos

こんにちは！

日本語は第二言語なので、文法の間違いがあれば、あらかじめ謝っておきます。

### 実現したいこと

このビデオに従って、私はDjango REST Framework + Next.js + NextAuthをGoogle認証で実装しようとしています。

https://www.youtube.com/watch?v=TvoMjY291f8

ビデオの指示に従ったのですが、「IDトークン」で問題が発生しています。このサイトの他の質問もチェックしましたが、同じ問題を経験している人を見つけることができませんでした。

### 発生している問題

サインインページで「Googleでログイン」ボタンをクリックすると、英語で「Access Denied」と書かれたエラーが出ます。

Djangoのサーバーサイドのコンソールでは、以下のようなエラーが表示されます。

```
raise OAuth2Error("Invalid id_token") from e
allauth.socialaccount.providers.oauth2.client.OAuth2Error: Invalid id_token
[13/Mar/2023 10:26:30] "POST /api/social/login/google/ HTTP/1.1" 500 162465
```

500エラーなので、URLかビューの問題だと思います。

### ソースコード

**フロント**

`[...nextauth].js`

```
import NextAuth from "next-auth";
import axios from "axios";
import GoogleProvider from "next-auth/providers/google";

const settings = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],

  callbacks: {
    async signIn({ user, account }) {
      if (account.provider === "google") {
        const accessToken = account.access_token;
        const idToken = account.id_token;

        console.log(idToken);

        try {
          const response = await axios.post(
            `${process.env.DJANGO_URL}/api/social/login/google/`,
            {
              access_token: accessToken,
              id_token: idToken,
            }
          );

          const { access_token } = response.data;
          user.accessToken = access_token;

          return true;
        } catch (error) {
          return false;
        }
      }
      return false;
    },

    async jwt({ token, account }) {
      if (account) {
        token.accessToken = account.access_token;
      }
      return token;
    },

    async session({ session, token }) {
      session.accessToken = token.accessToken;
      return session;
    },
  },
  pages: {
    signIn: "/auth/signin",
  },
};

export default (req, res) => NextAuth(req, res, settings);
```
上記のコードでは、コンソールログにIDトークンが正常に表示されています。

確認のため、.envファイルを示します。

```
DJANGO_URL=http://localhost:8000

GOOGLE_CLIENT_ID=秘密
GOOGLE_CLIENT_SECRET=秘密
```

Client IDとClient secretは、私のGoogleコンソールの情報と一致しています。

JavaScript Originはこのように設定されています。

`http://localhost:3000`

URIはこのように設定されています。

`http://localhost:3000/api/auth/callback/google`

**サーバー**

`authentication/views.py`

```
from allauth.socialaccount.providers.google.views import GoogleOAuth2Adapter
from dj_rest_auth.registration.views import SocialLoginView
from allauth.socialaccount.providers.oauth2.client import OAuth2Client


class GoogleLoginView(SocialLoginView):
    adapter_class = GoogleOAuth2Adapter
    client_class = OAuth2Client
```

`urls.py`

```
from django.contrib import admin
from django.urls import path, include

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/auth/', include('dj_rest_auth.urls')), #Endpoints provided by dj-rest-auth
    path('api/social/login/', include('authentication.urls')) #Endpoint for Social logins
]

urlpatterns=urlpatterns+static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
```

`authentication/urls.py`

```
from django.urls import path, include
from .views import GoogleLoginView

urlpatterns = [
    path("google/", GoogleLoginView.as_view(), name="google"),
]
```

### 自分で試したこと
この前、authentication/views.pyに「callback_url」変数を設定してみました。

マイグレーションを消して、新しいマイグレーションを作り、新しいマイグレーションを適用することを試しました。

他のフォーラムの投稿を参考に、POST/レスポンスの変数名を変えてみました。


### 補足情報

どうぞよろしくお願いいたします。

NextAuthをGoogle認証とDRFで500エラー

チャッド

### 実現したいこと
- [Django REST Framework + NextJS + Google認証システム構築](https://zenn.dev/hathle/books/next-drf-blog-auth-book)
で作成した認証機能を用いて、DRFのAPIを実行したい。

### 発生している問題
- Google認証で認証でログイン後、取得したaccessTokenを用いてDRFのAPIを叩いても認証エラーになってしまう。
- ChromeののDevtoolsは下記の通りで、DRFからは401エラーが返ってきております。

![](https://gyazo.com/32ae23508415c15774d1711af15a777e)
 
```
code: "token_not_valid"
detail: "Given token not valid for any token type"
``` 


 
### ソースコード
- 認証機能周りは[Django REST Framework + NextJS + Google認証システム構築](https://zenn.dev/hathle/books/next-drf-blog-auth-book)に準拠しています。
- 一部、記事のとおりでは動かない部分があったので修正しています。

component.tsx (抜粋です)
``` typescript
import { getSession } from 'next-auth/react';

const DatasourceTableView: FC = () => {
  useEffect(() => {
    const fetchData = async () => {
      if (!data.length) {
        setIsLoading(true);
      } else {
        setIsRefetching(true);
      }
      const session = await getSession();
      // console.log(session.accessToken)
    
      const url = new URL(
        'api/v1/datamanagement/',
        process.env.NODE_ENV === 'production'
          ? 'https://www.material-react-table.com'
          : 'http://localhost:8000',
      );
      try {
        const response = await fetch(url.href,
          {
            headers: {
              'Authorization': 'JWT ' + session.accessToken,
            },
          }
          )
```

pages/api/auth/[...nextauth].ts
```typescript
import NextAuth from 'next-auth'
import GoogleProvider from "next-auth/providers/google";
import axios from 'axios'

const settings = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
      secret: process.env.SECRET,
    }),
  ],
  callbacks: {
    async signIn({user, account}) {
      if (account.provider === 'google') {
        const accessToken = account.access_token;
        const idToken = account.id_token;
        try {
          const response = await axios.post(
            `${process.env.DJANGO_URL}/api/v1/social/login/google/`,
            {
              access_token: accessToken,
              id_token: idToken,
            }
          )

          const { access_token } = response.data
          console.log(access_token)
          user.accessToken = access_token
          return true
        } catch (error) {
          return false
        }
      }
      return false
    },

    async jwt({ token, account }) {
      if (account) {
          token.accessToken = account.access_token
      }
      // console.log(token)
      return token
    },

    async session({ session, token }) {
      session.accessToken = token.accessToken
      return session
  }
  },
}

export default (req, res) => NextAuth(req, res, settings)
```

### 自分で試したこと
- 表示されたaccessTokenを[このサイト](https://jwt.io/)でエンコードしようと思ってもinvalid Signatureになる
- ``curl -X GET http://localhost:8000/api/v1/datamanagement/  -H 'Authorization: JWT mytoken'``　と送っても同様のエラーが起きる

### 補足情報

Django REST Framework + NextJS + Google認証システム構築 で作成した認証機能を用いて、DRFのAPIを実行したい。

hodakam

### 実現したいこと
Django REST Framework + NextJS + Stripeサブスク有料会員サイト構築でチュートリアルを勧めているものの、Chapter20の
認証チェックでerrorが出て進めないのです。

### 発生している問題
アカウント登録画面で、アカウント情報を入力して送信ボタンを押すと、
POST http://localhost:3000/api/account/register 500 (Internal Server Error)　とerrorが出ています。

詳細をみると、
action/auth.jsx の fetch('/api/account/register', がエラーのようです。

http://localhost:3000/api/account/registerにアクセスすると、
{"error":"Method GET not allowed"}　が表示されます。

### ソースコード
```
import {
    // アカウント登録
    REGISTER_SUCCESS,
    REGISTER_FAIL,
  
    // 読み込み中
    SET_AUTH_LOADING,
    REMOVE_AUTH_LOADING,
  } from './types'

// アカウント登録
export const register = (name, email, password) => async (dispatch) => {
    dispatch({
      type: SET_AUTH_LOADING,
    })
  
    const body = JSON.stringify({
      name,
      email,
      password,
    })
  
    try {
      const res = await fetch('/api/account/register', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: body,
      })
  
      if (res.status === 200) {
        dispatch({
          type: REGISTER_SUCCESS,
        })
      } else {
        dispatch({
          type: REGISTER_FAIL,
        })
      }
    } catch (err) {
      dispatch({
        type: REGISTER_FAIL,
      })
    }
  
    dispatch({
      type: REMOVE_AUTH_LOADING,
    })
  }
```
### 自分で試したこと
ソースコードを見返しても間違っているところは見られませんでした。
postman でAPI動作確認をしたところ、問題はなかったです。

### 補足情報
redux 設定の時に、createStoreが非推奨なので、
reduxtoolkit  を使用しています。公式ページを観ながら作りました。
もしかするとこれが原因かもしれないです。
src/app/authSlice.jsx
```
import { createSlice } from "@reduxjs/toolkit";
import {
    // アカウント登録
    REGISTER_SUCCESS,
    REGISTER_FAIL,
  
    // 読み込み中
    SET_AUTH_LOADING,
    REMOVE_AUTH_LOADING,
  } from 'actions/types'

const initialState = {
    loading: false,
}
export const authSlice = createSlice({
    name:'auth',
    initialState,
    reducers: {
        increment: (state = initialState, action) =>{
            const { type, payload } = action

            switch (type) {
                // アカウント登録
                case REGISTER_SUCCESS:
                  return {
                    ...state,
                  }
                case REGISTER_FAIL:
                  return {
                    ...state,
                  }
            
                // 読み込み中
                case SET_AUTH_LOADING:
                  return {
                    ...state,
                    loading: true,
                  }
                case REMOVE_AUTH_LOADING:
                  return {
                    ...state,
                    loading: false,
                  }
                default:
                  return state
            }
        }
    }
})
export const { increment } = authSlice.actions
export default authSlice.reducer
```

src/app/store.jsx
```
import { configureStore } from '@reduxjs/toolkit'
import authSlice from './authSlice'

export const store = configureStore({
  reducer: {
    auth: authSlice,
  },
})
```

間違っている点があれば、是非教えていただけると助かります。