- Download the project from
GitHub
and in the terminal typenpm install
npm install
- create environment Variables
.env
important create private.env.local
SUPABASE_URL=YOUR_SUPABASE_URL
SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY
- Create new project in Supabase
NOTE: replace YOUR_SUPABASE_URL and YOUR_SUPABASE_ANON_KEY in
.env
- install supabase in terminal with your project
npm install @supabase/supabase-js
4.1. Add this code in src/env.d.ts
interface ImportMetaEnv {
readonly SUPABASE_URL: string
readonly SUPABASE_ANON_KEY: string
}
interface ImportMeta {
readonly env: ImportMetaEnv
}
- Create new folder
/lib
in /src and filesupabase.ts
src/lib/supabase.ts
import { createClient } from "@supabase/supabase-js";
export const supabase = createClient(
import.meta.env.SUPABASE_URL,
import.meta.env.SUPABASE_ANON_KEY,
);
-
Create project in google cloud and github dev
-
Code - Documentation Astro.js
-
add this is code in buttons for
login
andexit
<form action="/api/auth/login" method="post">
<form action="/api/auth/logout">
Important
Add or change in: astro.config.mjs
to (output: 'server',)
- Integrates
Name
andEmail
,Picture
const name = data?.user?.user_metadata?.full_name;
const picture = data?.user?.user_metadata?.avatar_url;
Code example:
import { Icons } from "../components/Icons";
import { supabase } from "../lib/supabase";
const { cookies, redirect } = Astro;
const accessToken = cookies.get("sb-access-token");
const refreshToken = cookies.get("sb-refresh-token");
if (!accessToken || !refreshToken) {
return redirect("/login");
}
const { data, error } = await supabase.auth.setSession({
refresh_token: refreshToken.value,
access_token: accessToken.value,
});
if (error) {
cookies.delete("sb-access-token", {
path: "/",
});
cookies.delete("sb-refresh-token", {
path: "/",
});
return redirect("/login");
}
const email = data?.user?.email;
const name = data?.user?.user_metadata?.full_name;
const picture = data?.user?.user_metadata?.avatar_url;
Tip
Change in: /pages/api/auth/logout.ts
return redirect("/signin"); to ("/")
or ("/login)
Add in: (pages/dashboard.astro)
const { cookies, redirect } = Astro
const accessToken = cookies.get('sb-access-token')
const refreshToken = cookies.get('sb-refresh-token')
if (!accessToken && !refreshToken) {
return redirect('/login')
}
Add in: (pages/login.astro)
const { cookies, redirect } = Astro
const accessToken = cookies.get('sb-access-token')
const refreshToken = cookies.get('sb-refresh-token')
if (accessToken && refreshToken) {
return redirect('/dashboard')
}
Technology | Purpose | Link |
---|---|---|
Astro | Astro Doc Supabase | Docs |
TailwindCSS | Styling | Docs |
React | Library | Docs |
Supabase | Database/storage/auth | Docs |
Google cloud | Docs | |
GitHub | Github Dev | Docs |