Capture The Frog

かえるぴょこぴょこw

MENU

streamlit cloud上でAuth0を使用したログインを行う際のAuth0の設定

streamlit上でAuth0を使用したログインを行ったときに、ローカルでのログインは出来るが、streamlit cloudでデプロイしたときには動かないことがあります。
ローカル時と同じ設定方法ではAuth0は動きません。

しかし、多くの場合、解説記事ではローカルでの設定しか書かれておらず、デプロイする際の設定は書かれていません。
多くの人がここで戸惑っています。

https://discuss.streamlit.io/t/new-component-auth0-component-a-simple-way-to-authenticate-a-user/18260/11


そこで、ここではstreamlitを使用して開発した自分のアプリをstreamlit cloudでデプロイしたときのAuth0の設定について書いていきます。


streamlit上でAuth0でログインする基本のコンポーネントとして、streamlit-auth0を使用させて頂きます。
Auth0以外の基本的な設定は、レポジトリ内のReadme.mdに沿って行ってください。
github.com

Thanks, conradbez!!!

紹介記事
discuss.streamlit.io






方法

1,callback URL

https://YOUR_APP_ON_STREAMLIT_CLOUD_DOMAIN/~/+/component/auth0_component.login_button/index.html, http://YOUR_AUTH0_DOMAIN/component/auth0_component.login_button/index.html

2,Allowed Web origin

https://YOUR_APP_ON_STREAMLIT_CLOUD_DOMAIN/~/+/component/auth0_component.login_button/index.html




↓存在しないアカウントとstreamlit cloud上のアプリ
Auth0 settings page
My App url on streamlit cloud

https://crum7-test-streamlit-appmikata-main-ub2ry5.streamlit.app/


Auth0の設定
1,call back URL

https://crum7-test-streamlit-appmikata-main-ub2ry5.streamlit.app/~/+/component/auth0_component.login_button/index.html, http://dev-o3y3v7wthueiyyyt.us.auth0.com/component/auth0_component.login_button/index.html


2,Allowed Web origin

https://crum7-test-streamlit-appmikata-main-ub2ry5.streamlit.app/~/+/component/auth0_component.login_button/index.html