Files
supabase/examples/with-leaflet/README.md
2022-05-30 14:52:54 +08:00

52 lines
1.9 KiB
Markdown

# Live Tracker Map
Build with supabase-js and leafletjs.
<p align="center">
<kbd>
<img src="https://i.imgur.com/WoMRKwo.gif" alt="Demo"/>
</kbd>
</p>
## Test with your own Supabase Project
Note: you have to enable `DISABLE EMAIL CONFIRMATIONS` under your Supabase project settings.
#### Database schema
Go to [app.supabase.com](https://app.supabase.com/), create a new organization and project if you haven't had one.
Run this sql query to create required tables.
```sql
-- Locations
CREATE TABLE public.locations (
id bigint GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,
latitude numeric NOT NULL,
longitude numeric NOT NULL,
user_id uuid REFERENCES auth.users NOT NULL
);
ALTER TABLE public.locations ENABLE ROW LEVEL SECURITY;
COMMENT ON table public.locations IS 'Individual locations sent by each user.';
CREATE POLICY "Allow logged-in read access" on public.locations USING ( auth.role() = 'authenticated' );
CREATE POLICY "Allow individual insert access" on public.locations FOR INSERT WITH CHECK ( auth.uid() = user_id );
```
#### Setup env vars
Next, copy the `.env.local.example` file in this directory to `.env.local` (which will be ignored by Git):
```bash
cp .env.local.example .env.local
```
Then set each variable on `.env.local`:
- `NEXT_PUBLIC_SUPABASE_URL` should be the **API URL**
- `NEXT_PUBLIC_SUPABASE_KEY` should be the **anon** key
You can get these values from your project dashboard at [app.supabase.com](https://app.supabase.com/).
The **anon** key is your client-side API key. It allows "anonymous access" to your database, until the user has logged in. Once they have logged in, the keys will switch to the user's own login token. This enables row level security for your data.
> **_NOTE_**: The `service_role` key has full access to your data, bypassing any security policies. These keys have to be kept secret and are meant to be used in server environments and never on a client or browser.