SupabaseSurface.Components.Auth (supabase_surface v0.4.0)
A Surface component that handles auth for Supabase.
It uses a Surface hook to parse the tokens that are provided after a successful
login in the URI fragment ({base_url}/login#access_token=user-jwt&refresh_token=user-refresh-jwt
).
The tokens are then send to an API endpoint (default: /session
) to set them in the session.
This endpoint has to be provided by the user.
Session Setup Example
defmodule YourSurfaceAppWeb.SessionController do
use YourSurfaceAppWeb, :controller
def set_session(conn, %{"access_token" => access_token, "refresh_token" => refresh_token}) do
conn
|> put_session(:access_token, access_token)
|> put_session(:refresh_token, refresh_token)
|> json("ok")
end
end
# router.ex
scope "/", YourSurfaceAppWeb do
pipe_through(:api)
post("/session", SessionController, :set_session)
end
It currently supports magic link and social providers:
Usage Example
<Auth redirect_url="/welcome" magic_link={{ true }} providers={{ ["google", "github"] }} />
Properties
- id :string, required: true - The id of the live component (required by LiveView for stateful components). .
- redirect_url :string, default: "/" - URL to redirect to after successful login handled by this component. In case you want
to be redirected to a different location by the provider, use
provider_redirect_url
.. - provider_redirect_url :string - URL the provider should redirect after successful authentication. The target location will have to handle the passed token information..
- session_url :string, default: "/session" - API endpoint for updating the session with access_token and refresh_token.
- class :css_class - Classes to apply to the component.
- magic_link :boolean, default: true - If sign in via magic link should be enabled.
- providers :list, values: ["google", "github", "gitlab", "bitbucket", "twitter", "facebook"] - Providers to use for social auth.
- password_login :boolean, default: false - Enable login via email plus password.
Link to this section Summary
Functions
Callback implementation for Phoenix.LiveComponent.mount/1
.
Link to this section Functions
Link to this function
mount(socket)
Callback implementation for Phoenix.LiveComponent.mount/1
.