SupabaseSurface.Components.Auth (supabase_surface v0.1.5)

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

Link to this section Functions

Callback implementation for Phoenix.LiveComponent.mount/1.