add: Authentication with auth-astro

astro.config.mjs

@@ -1,22 +1,35 @@
 import { defineConfig, passthroughImageService } from "astro/config";
 import tailwind from "@astrojs/tailwind";
 import vercel from "@astrojs/vercel/serverless";
-
 import react from "@astrojs/react";
 
+import auth from "auth-astro";
+
 // https://astro.build/config
 export default defineConfig({
+  site: "https://movie-astro.vercel.app",
   image: {
     remotePatterns: [
       {
         protocol: "https",
         hostname: "image.tmdb.org",
+        pathname: "/**",
+        port: "",
+      },
+      {
+        protocol: "https",
+        hostname: "lh3.googleusercontent.com",
+        pathname: "/**",
+        port: "",
       },
     ],
-    domains: ["image.tmdb.org"],
+    domains: ["image.tmdb.org", "lh3.googleusercontent.com"],
     service: passthroughImageService(),
   },
-  integrations: [tailwind(), react()],
+  experimental: {
+    actions: true,
+  },
+  integrations: [tailwind(), react(), auth()],
   output: "server",
   adapter: vercel({
     imageService: true,

auth.config.ts

@@ -0,0 +1,44 @@
+import { defineConfig } from "auth-astro";
+import Google from "@auth/core/providers/google";
+import Credentials from "@auth/core/providers/credentials";
+import { supabase } from "@/lib/supabase/supabase";
+import { checkValidUser, registerUser } from "@/lib/supabase/function";
+
+export default defineConfig({
+  session: {
+    strategy: "jwt",
+  },
+  secret: import.meta.env.AUTH_SECRET,
+  providers: [
+    Google({
+      clientId: import.meta.env.GOOGLE_OAUTH_CLIENT_ID,
+      clientSecret: import.meta.env.GOOGLE_OAUTH_SECRET,
+    }),
+  ],
+  callbacks: {
+    async jwt({ token, account, user }: any) {
+      if (account?.provider === "google") {
+        const checkUser = await checkValidUser(user.email);
+
+        if (!checkUser.status) {
+          await registerUser({
+            email: user.email,
+            name: user.name,
+            image: user.image,
+          });
+        }
+
+        console.log("Registered", user.email, user.name, user.image);
+        console.log(checkUser);
+      }
+
+      return token;
+    },
+    async session({ session }) {
+      return session;
+    },
+  },
+  pages: {
+    signIn: "/signin",
+  },
+});

package.json

@@ -14,12 +14,19 @@
     "@astrojs/react": "^3.6.0",
     "@astrojs/tailwind": "^5.1.0",
     "@astrojs/vercel": "^7.7.2",
+    "@auth/core": "^0.32.0",
+    "@nanostores/react": "^0.7.2",
+    "@supabase/supabase-js": "^2.44.3",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "astro": "^4.11.5",
+    "auth-astro": "^4.1.2",
     "date-fns": "^3.6.0",
+    "framer-motion": "^11.2.14",
+    "nanostores": "^0.10.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-hot-toast": "^2.4.1",
     "react-icons": "^5.2.1",
     "sharp": "^0.33.4",
     "tailwindcss": "^3.4.4",