Installation and Setup
Elixir
Installation
In your LiveView project, add supabase_surface
to your dependencies:
[
...
{:supabase_surface, "~> 0.1.4"},
...
]
Configuration
One of Supabase Surface's dependencies is supabase-elixir, which is used to work with Supabase.
It uses gotrue-elixir for Auth and postgrest-ex for working with the Database.
supabase-elixir
ships the Storage functionality and provides common configuration.
For this to work, we have to add the necessary configuration options:
config :supabase,
base_url: "https://blalfvwaoqujxgvsitty.supabase.co",
api_key: "<anon api key>"
Using the Auth Component
In case you intend to use the Auth
component, you will need an api endpoint for
putting the access_token into the session.
# router.ex
pipeline :api do
plug :accepts, ["json"]
plug :fetch_session
end
scope "/", YourSupaAppWeb do
pipe_through :api
post "/session", SessionController, :set_session
end
# YourSupaAppWeb.SessionController
defmodule SupabaseSurfaceDemoWeb.SessionController do
use SupabaseSurfaceDemoWeb, :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
Supabase Surface also provides a plug, SupabaseSurface.Plugs.Session
,
to check if there already are tokens in the session, including handling for refreshing them when necessary:
This can be added to your :browser
pipeline in the router:
# router.ex
pipeline :browser do
...
plug SupabaseSurfaceWeb.Plugs.Session
end
JavaScript
Supabase Surface also comes with styles and JavaScript, so you also have to
add the dependency to your package.json
:
"dependencies": {
...
"supabase_surface": "file:../deps/supabase_surface",
...
}
Setup
LiveSocket configuration
We also have to configure our LiveSocket
to work with Alpine.js
and include
the hooks provided by Supabase Surface:
import "supabase_surface";
import { Hooks } from "supabase_surface";
let liveSocket = new LiveSocket("/live", Socket, {
params: { _csrf_token: csrfToken },
hooks: { ...hooks },
dom: {
onBeforeElUpdated(from, to) {
if (from.__x) {
window.Alpine.clone(from.__x, to);
}
},
},
});
With that you should be good to go.
For more information check out the available guides or have a look at this demo.