# Auth0 + Bubble + Xano の連携での問題について **URL:** \ **Category:** bubble\ **Tags:** 認証関連\ **Created:** [2025 年 3 月 21 日午前 4:39 UTC](https://www.nocode-faq.com/t/topic/4504 "2025-03-21T04:39:52Z")\ **Posts on this page:** 6\ **Page:** 1
**Author:** ![ono](https://avatars.discourse-cdn.com/v4/letter/o/b19c9b/32.png) [@ono](https://www.nocode-faq.com/u/ono)\ **Post date:** [2025 年 3 月 21 日午前 4:39 UTC](https://www.nocode-faq.com/t/topic/4504/1 "2025-03-21T04:39:52Z")
お世話になります。 おそらくあと少しのところで詰まっています。 ■やりたいこと Bubble アプリで Auth0 を使ったログイン認証 を実装し、 認証後に Xano にユーザー情報を登録し、register ページ（プロフィール入力ページ）にリダイレクトさせる。 ■現在のAPI設定 ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/7/7b11e616f8ca71493c932370ac8699f4b4054efe.png) ■現在（理想）のフロー ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/f/ff64d9f4dec29e05bb9256057f389d70d4481c6e.png) ①ユーザーが login ページ（[https://xxxxxx.com/login）でログインボタンを押す](https://xxxxxx.com/login%EF%BC%89%E3%81%A7%E3%83%AD%E3%82%B0%E3%82%A4%E3%83%B3%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%92%E6%8A%BC%E3%81%99) ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/1/175e892c942ba4842c75d771a90f02d27a28e301.png) → Auth0 の authorize エンドポイントにリダイレクト → ユーザーがログイン or 新規登録を行う ②①完了後、Auth0 が code を発行し、oauth\_redirect にリダイレクト リダイレクト先: [https://xxxxxx.com/api/1.1/oauth\_redirect?code=XXXXXX](https://xxxxxx.com/api/1.1/oauth_redirect?code=XXXXXX) ③Xano の Continue API(codeをもとにaccess\_tokenを取得するためのAPI) を呼び出し、code を渡して access\_token を取得 Continue API: [https://xxxxxxxxxx.xano.io/api:us\_-Xoqo/oauth/auth0/continue](https://xxxxxxxxxx.xano.io/api:us_-Xoqo/oauth/auth0/continue) ④access\_token を取得し、Xano にユーザー情報を登録 register ページ ([https://xxxxxxx.com/version-test/register](https://xxxxxxx.com/version-test/register)) に遷移 ■発生している問題 ① ログイン後に oauth\_redirect に飛ぶが、エラーページになってしまう [https://xxxxxxxx.com/api/1.1/oauth\_redirect?code=XXXXXX](https://xxxxxxxx.com/api/1.1/oauth_redirect?code=XXXXXX) に遷移するが、意図したページ (register) に行かない。 ② Continue API の code が手動でしか渡せない Continue API に code を渡せば access\_token が返るが、現在は手動で 固定値のcode を入力しないと動かない。 code（のvalue）を動的にcontinueAPIに渡す方法がわからない。 ■試したこと ✅ Auth0 の Allowed Callback URLs に [https://xxxxxx.com/version-test/register](https://xxxxxx.com/version-test/register) を追加 ✅ Backend Workflow で code を Continue API に渡すよう設定 ✅ register ページで token を URL から取得し、Custom State に保存するよう設定 ✅ Continue API のパラメータを手動で渡したら access\_token が取得できた また、手動だとXanoにもアカウント登録できた ■質問 Auth0 の oauth\_redirect 後に register ページにリダイレクトする方法は？ Continue API に code を自動で渡すための適切な Bubble の設定は？ 最終的に、手動で code を貼り付けなくても、ログインフローがスムーズに動くようにしたいです。 Bubble, Xano, Auth0 を組み合わせた場合の、適切な設定を教えてください。 お手数おかけいたしますが、何卒よろしくお願いいたします。 ---
**Author:** ![john03tgck01a](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/john03tgck01a/32/4558_2.png) [@john03tgck01a](https://www.nocode-faq.com/u/john03tgck01a)\ **Post date:** [2025 年 3 月 25 日午後 12:27 UTC](https://www.nocode-faq.com/t/topic/4504/2 "2025-03-25T12:27:25Z")
Bubble + Xano連携はよくやっていますが、Auth0を組み合わせたことはないので、見当違いだったらスルーしてください。 リダイレクトURLの末尾にparameterを渡すよりも、Bubbleのcurrent user機能を使って（ログインしていないユーザーも使用できる）tokenを一時保存させてみてはどうでしょうか。 つまり、ユーザーがログインに成功すると、Bubbleの「Current User」にAuth0のユーザー情報を保存されます（Auth0 idやメールアドレスなど）。 そしてこのCurrent User Auth情報を元にXanoにデータ保存させることで解決できるのでは？と思いました。 もしくは、XanoにもAuth認証機能があるので、そちらを試すのもいいかもしれません。 > **[Xano - Authentication | Xano](https://www.xano.com/learn/Xano-Authentication/)** > > Learn how to securely set up and manage user authentication with Xano's flexible authentication system. This step-by-step guide covers enabling authentication for database tables, exploring auto-generated API endpoints for sign up, login, and user... ---
**Author:** ![ono](https://avatars.discourse-cdn.com/v4/letter/o/b19c9b/32.png) [@ono](https://www.nocode-faq.com/u/ono)\ **Post date:** [2025 年 3 月 25 日午後 2:15 UTC](https://www.nocode-faq.com/t/topic/4504/3 "2025-03-25T14:15:23Z")
じょん様 お世話になります。 ご教示いただきありがとうございます。 実は現在、Bubbleのコミュニティでも質問をしておりまして、そちらでもらっている回答をもとに実装を進めてみています。 > **[How to send dynamic header values with the API](https://forum.bubble.io/t/how-to-send-dynamic-header-values-with-the-api/364315/11)** > > Thank you. I apologize for the late reply. I understand that a generic redirect URL cannot be used. I was trying to create an API workflow, but I don’t know how to do it specifically. This is what I have currently, but does this seem correct? ... ロジックを少し変えまして、ワークフローはいったんAuth0のログイン画面を開くところまでに変更しました（ContinueAPIにcodeがうまく送れていないようで、呼び出しでエラーが出てしまうため）。 ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/0/0e3a489131a46df8f11d9cc327c98083690fb2aa.png) アカウント登録完了後、ページロードを挟んで（codeからtokenを取得した上で）registerページ（プロフィール入力ページ）に遷移させたいのですが、そこがうまく実装できず、引き続きアドバイスをもらっている状況です。 ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/7/74ec7f86351d5e1803445b905c73975b56d8c6b1.png) また、当初はCustom Stateで実装をと考えていたのですが、それよりもBubbleのプラグインを使った方がよいのかなと思いつつ、試行錯誤中です。 > **[Bubble でブラウザデータ保存 Local Storage を利用する方法 - ノーコード ラボ](https://blog.nocodelab.jp/entry/localstrage)** > > こんにちは！ 今回は、Bubble で Local Storage を利用する方法についてご紹介します。 Local Storage は、HTML5 から登場した Web ブラウザにデータを保存するための仕組みです。 この仕組みを利用すると、Web アプリケーションからデータベースへのアクセスなしでユーザー側のブラウザに簡単にデータを保存できます。 例えば、オンラインショップなどでユーザーのお気に入りを Local Storage... もしうまくいかなかった場合、あらためてじょん様にご連絡させていただけますと幸いです。 その際、ご教示いただいたcurrent user機能をもとに実装をしてみたいと思います。 また、ご教示いただいた内容とは変わってしまいますが、ここまでの実装内容で何か問題がございましたら、ご指摘いただけますと幸いです。 進捗あり次第、また随時ご報告させていただければと思います。 何卒よろしくお願いいたします。 お手数をおかけしますが、引き続きよろしくお願いいたします。 ---
**Author:** ![john03tgck01a](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/john03tgck01a/32/4558_2.png) [@john03tgck01a](https://www.nocode-faq.com/u/john03tgck01a)\ **Post date:** [2025 年 3 月 25 日午後 3:42 UTC](https://www.nocode-faq.com/t/topic/4504/4 "2025-03-25T15:42:12Z")
これ難しいですね。。。 ちょっと力になれないかもしれません🙏 もし自分がonoさんと同じ問題に直面したらAuth0もしくはXanoのサポートに聞いちゃいます。 Auth0はわかりませんが、Xanoのサポートはとても手厚いので気に入っています。 ---
**Author:** ![ono](https://avatars.discourse-cdn.com/v4/letter/o/b19c9b/32.png) [@ono](https://www.nocode-faq.com/u/ono)\ **Post date:** [2025 年 3 月 25 日午後 3:45 UTC](https://www.nocode-faq.com/t/topic/4504/5 "2025-03-25T15:45:01Z")
ありがとうございます！ 私自身xanoへの問い合わせをすっかり忘れていました。 このあと解決しなければ、再度xanoへ問い合わせしてみようと思います。 引き続きよろしくお願いいたします。 ---
**Author:** ![ono](https://avatars.discourse-cdn.com/v4/letter/o/b19c9b/32.png) [@ono](https://www.nocode-faq.com/u/ono)\ **Post date:** [2025 年 4 月 5 日午前 10:02 UTC](https://www.nocode-faq.com/t/topic/4504/6 "2025-04-05T10:02:45Z")
ご無沙汰しております。 じょんさん、先日はありがとうございます。 こちら、いったん解決したので備忘録として残しておきます。 Xanoへ質問しましたが、私の質問が下手だったのでBubbleのコミュニティで質問しながら、自力で解決しました（ので、正しい実装とは限らないので、同じ状況の方がいらっしゃればあくまでもご参考までに） まず、Bubbleでログインボタンを押した後のワークフローです。 Xanoで用意されているエンドポイント「/oauth/auth0/init」から、Auth0のログインページを取得して、それを開きます。 ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/e/ed7d6f0021fb74e607a2be9529e4bbc14f849a25.png) ログイン後、どこのページにリダイレクトさせたいかをXanoのdefault valueやAuth0のCallback URL、Bubbleのワークフローで指定します。 また、ログイン後にAuth0から一時的な「code」が返されます。 その後、（他にもやり方はありそうですがいったん）リダイレクトする（=ページがリロードされる）ので、リダイレクト先のページで以下のワークフローを組みました。 ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/6/62201fd31c07f387df1f65d50b566fd134f5083d.png) ページがリロードされたら、まずはXanoで用意されているエンドポイント「/oauth/auth0/continue」で、codeをもとにTokenを取得します。 このTokenは、XanoのDBを参照するときに使います。 そして、Xanoで用意されているエンドポイント「/auth/me」に「Bearer （STEP1で取得した）Token」でリクエストすると、XanoのUserテーブルの情報（レコード）が引っ張ってこれます。 引っ張ってきた情報を、最初はCustom Stateに保存していましたが、リロードすると消えてしまうので、以下のプラグインを利用してブラウザのローカルストレージに保存することにしました。 > **[Bubble でブラウザデータ保存 Local Storage を利用する方法 - ノーコード ラボ](https://blog.nocodelab.jp/entry/localstrage)** > > こんにちは！ 今回は、Bubble で Local Storage を利用する方法についてご紹介します。 Local Storage は、HTML5 から登場した Web ブラウザにデータを保存するための仕組みです。 この仕組みを利用すると、Web アプリケーションからデータベースへのアクセスなしでユーザー側のブラウザに簡単にデータを保存できます。 例えば、オンラインショップなどでユーザーのお気に入りを Local Storage... これで永続的に情報が維持できるので、リロードしても問題なくなりました。 ただ、リロードするとまたcontinue等が動いてしまうので、ワークフローの最初の方はOnlyWhenでの工夫が必要だと思います。 以降、取得したTokenを使って、ユーザーの各種情報を取ってくる、ということになると思っています。 以上となります。 引き続きよろしくお願いいたします。