This project is intended to test some features of Astro, such as Astro actions with React and vanilla JavaScript. It also includes a small test with Prisma and Auth.js.
npm install
Browsing to Google Cloud Console and create "OAuth 2.0 Client IDs" Credentials
Field | Content |
---|---|
Authorized JavaScript origins |
http://localhost:4321 |
Authorized redirect URIs |
http://localhost:4321/api/auth/callback/google |
And save, also check "OAuth consent screen" and accept any screen
Rename the file .env.sample to .env and add:
GOOGLE_CLIENT_ID=***
GOOGLE_CLIENT_SECRET=***
also in .env you have to complete the AUTH_SECRET field. You can do this by copying the hash from https://generate-secret.vercel.app/32 or you can generate it yourself using the command on Mac "openssl rand -base64 32" or find a similar command for your OS.
AUTH_SECRET=***
There is already a test model in /prisma/schema.prisma for User, you only need to run the following commands.
npx prisma migrate dev --name init
npx prisma generate
Then, using npx prisma studio
in the console, you can manually add some users to the SQLite database.
Inside of your Astro project, you'll see the following folders and files:
/
โโโ public/
โ โโโ favicon.svg
โโโ src/
โ โโโ actions/
โ โ โโโ index.ts //simple server actions
โ โโโ components/
โ โ โโโ Multi.astro //component with astro actions + vanilla JavaScript
โ โ โโโ MultiReact.jsx //component with astro actions + React
โ โ โโโ PrismaReact.jsx //component with astro actions + react + prisma
โ โโโ layouts/
โ โ โโโ Layout.astro
โ โโโ pages/
โ โโโ index.astro // test simple astro action, enter any number, and it will be multiplied by 2 on the server.
โ โโโ prisma.astro // test astro action + prisma
โ โโโ prismareact.astro // test astro action + prisma + react
โ โโโ secret.astro // test authjs
โโโ package.json
npm run dev