質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Authentication

Authentication(認証)は正当性を認証する為の工程です。ログイン処理等で使われます。

解決済

Next.jsにおいてauth0-reactライブラリを使用しloginWithRedirectを呼び出した時に正しいURLに遷移できない

sasakirione
otaku-nanao

総合スコア2

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Authentication

Authentication(認証)は正当性を認証する為の工程です。ログイン処理等で使われます。

1回答

0リアクション

0クリップ

210閲覧

投稿2022/08/12 16:31

編集2022/08/12 16:40

前提

Next.js(TypeScript)でAuth0を使用したユーザー認証機能があるページを作っています。

実現したいこと

  • Auth0のログイン画面に遷移する

発生している問題・エラーメッセージ

LoginボタンをクリックしてonClickを発火させloginWithRedirectを呼び出してもエラー画面に遷移してしまいます。

URLから考えるに本来、ドメインとクライアントIDとリダイレクトURLがセットされてURLが完成するところに、なんらかの理由でそれらが空文字のままセットされていることが原因かと思われるがそれがなぜ生じるのかが分からない。

該当URL:https://authorize/?client_id=&redirect_uri=&scope=openid%20profile%20email&response_type=code&response_mode=query&state=[ただしそうな値]&nonce=[ただしそうな値]&code_challenge=[ただしそうな値]&code_challenge_method=S256&auth0Client=[ただしそうな値] 該当エラー:DNS_PROBE_FINISHED_NXDOMAIN

該当のソースコード

TypeScript

import {useAuth0} from "@auth0/auth0-react"; import {Button} from "@mui/material"; const AuthButton = () => { const { isAuthenticated, loginWithRedirect, logout } = useAuth0(); return ( <div className="left" > {isAuthenticated && ( <Button color="inherit" onClick={() => logout()}>Logout</Button> )} {!isAuthenticated && ( <Button color="inherit" onClick={() => loginWithRedirect()}>Login</Button> )} </div> ) } export default AuthButton

TypeScript

import '../styles/globals.css' import type { AppProps } from 'next/app' import Header from "../components/atomic/Header"; import {Auth0Provider} from "@auth0/auth0-react"; function MyApp({ Component, pageProps }: AppProps) { const redirectUrl = process.env.AUTH0_REDIRECT_URL ?? "" const domain = process.env.AUTH0_DOMAIN ?? "" const clientId = process.env.AUTH0_CLIENT_ID ?? "" return ( <Auth0Provider domain={domain} clientId={clientId} redirectUri={redirectUrl} > <Header/> <Component {...pageProps} /> </Auth0Provider> ) } export default MyApp

試したこと

  • デバッグツールでAuth0Providerにセットしてる値(ドメイン、クライアントID、リダイレクトURL)が正しく環境変数から取れていることを確認(nullの時の空文字がセットされていない)
  • 類似事例の調査

補足情報(FW/ツールのバージョンなど)

  • next: 12.2.3
  • react: 18.2.0
  • react-dom: 18.2.0
  • @auth0/auth0-react: 1.10.2

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Authentication

Authentication(認証)は正当性を認証する為の工程です。ログイン処理等で使われます。