🚀 Init
This commit is contained in:
Korbs
commit
3613cc360c
23 changed files with 501 additions and 0 deletions
3
.dockerignore
Normal file
3
.dockerignore
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
.DS_Store
|
||||
node_modules
|
||||
dist
|
||||
3
.env.sample
Normal file
3
.env.sample
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
authorizerURL='https://auth.example.com'
|
||||
redirectURL='/'
|
||||
clientID='00000000-0000-0000-0000-000000000000'
|
||||
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
# build output
|
||||
dist/
|
||||
# generated types
|
||||
.astro/
|
||||
|
||||
# dependencies
|
||||
node_modules/
|
||||
|
||||
# logs
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
|
||||
|
||||
# environment variables
|
||||
.env
|
||||
.env.production
|
||||
|
||||
# macOS-specific files
|
||||
.DS_Store
|
||||
|
||||
# jetbrains setting folder
|
||||
.idea/
|
||||
12
Dockerfile
Normal file
12
Dockerfile
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
FROM node:lts AS runtime
|
||||
WORKDIR /app
|
||||
|
||||
COPY . .
|
||||
|
||||
RUN npm install
|
||||
RUN npm run build
|
||||
|
||||
ENV HOST=0.0.0.0
|
||||
ENV PORT=4321
|
||||
EXPOSE 4321
|
||||
CMD node ./dist/server/entry.mjs
|
||||
59
README.md
Normal file
59
README.md
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
# Astro + Authorizer Template
|
||||
|
||||
|
||||
## Setup
|
||||
Clone the repository to your machine:
|
||||
```bash
|
||||
git clone https://sudovanilla.com/code/Korbs/astro-authorizer-template
|
||||
```
|
||||
|
||||
Install packages with your preferred package manager:
|
||||
```
|
||||
# NPM
|
||||
npm install
|
||||
|
||||
# Yarn
|
||||
yarn
|
||||
|
||||
# Bun
|
||||
bun install
|
||||
|
||||
# PNPM
|
||||
pnpm install
|
||||
```
|
||||
|
||||
Setup the `.env` file for your Authorizer instance:
|
||||
```env
|
||||
authorizerURL='https://auth.example.com'
|
||||
redirectURL='/'
|
||||
clientID='00000000-0000-0000-0000-000000000000'
|
||||
```
|
||||
|
||||
Run it:
|
||||
```bash
|
||||
npm start
|
||||
```
|
||||
|
||||
The site should be running on http://localhost:4321.
|
||||
|
||||
## Server-Side Rendering
|
||||
This template is built to run on the server side, not client. So don't run this is a static site on your server or else where.
|
||||
|
||||
Astro has ways to run the site in SSR:
|
||||
- [Docker](https://docs.astro.build/en/recipes/docker/#ssr)
|
||||
- [Node](https://docs.astro.build/en/guides/integrations-guide/node/)
|
||||
- [Cloudflare Pages](https://docs.astro.build/en/guides/integrations-guide/cloudflare/)
|
||||
- [Netlify](https://docs.astro.build/en/guides/integrations-guide/netlify/)
|
||||
- [Vercel](https://docs.astro.build/en/guides/integrations-guide/vercel/)
|
||||
|
||||
A `Dockerfile` has been provided for this repo, which can be built using:
|
||||
```bash
|
||||
docker build -t astro-authorizer-demo .
|
||||
```
|
||||
|
||||
Then running it with:
|
||||
```
|
||||
docker compose up -d
|
||||
```
|
||||
|
||||
The site should be running on http://localhost:7000.
|
||||
12
astro.config.mjs
Normal file
12
astro.config.mjs
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
import { defineConfig } from 'astro/config'
|
||||
import node from "@astrojs/node"
|
||||
import vue from '@astrojs/vue' // For Iconoir, not nessesary for Authorizer
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
output: "server",
|
||||
adapter: node({
|
||||
mode: "standalone"
|
||||
}),
|
||||
integrations: [vue()],
|
||||
});
|
||||
BIN
banner.png
Normal file
BIN
banner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 131 KiB |
9
docker-compose.yml
Normal file
9
docker-compose.yml
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
version: "3"
|
||||
services:
|
||||
minpluto:
|
||||
image: astro-authorizer-demo
|
||||
restart: unless-stopped
|
||||
volumes:
|
||||
- ./env:./env
|
||||
ports:
|
||||
- "7000:7000"
|
||||
17
package.json
Normal file
17
package.json
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
{
|
||||
"name": "astro-authorizer-template",
|
||||
"type": "module",
|
||||
"version": "0.0.3",
|
||||
"scripts": {
|
||||
"start": "astro dev"
|
||||
},
|
||||
"dependencies": {
|
||||
"@astrojs/node": "^8.2.5",
|
||||
"@astrojs/vue": "^4.0.10",
|
||||
"@authorizerdev/authorizer-js": "^2.0.2",
|
||||
"@iconoir/vue": "^7.5.0",
|
||||
"add": "^2.0.6",
|
||||
"astro": "^4.5.15",
|
||||
"sass": "^1.72.0"
|
||||
}
|
||||
}
|
||||
BIN
public/Authorizer.png
Normal file
BIN
public/Authorizer.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.6 KiB |
BIN
public/astro-logo-light-gradient.png
Normal file
BIN
public/astro-logo-light-gradient.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
9
public/favicon.svg
Normal file
9
public/favicon.svg
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
|
||||
<path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
|
||||
<style>
|
||||
path { fill: #000; }
|
||||
@media (prefers-color-scheme: dark) {
|
||||
path { fill: #FFF; }
|
||||
}
|
||||
</style>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 749 B |
28
src/components/Header.astro
Normal file
28
src/components/Header.astro
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
---
|
||||
// Icons
|
||||
import { Plus } from "@iconoir/vue";
|
||||
---
|
||||
|
||||
<header>
|
||||
<div class="astro-and-authorizer">
|
||||
<img src="/astro-logo-light-gradient.png" />
|
||||
<Plus />
|
||||
<img src="/Authorizer.png" />
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<style lang="scss">
|
||||
header {
|
||||
margin: auto;
|
||||
.astro-and-authorizer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
justify-content: center;
|
||||
padding: 44px 0px;
|
||||
img {
|
||||
width: 250px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
1
src/env.d.ts
vendored
Normal file
1
src/env.d.ts
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
/// <reference types="astro/client" />
|
||||
58
src/layouts/Default.astro
Normal file
58
src/layouts/Default.astro
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
---
|
||||
// Layout Properties
|
||||
const {Title} = Astro.props
|
||||
|
||||
// Components
|
||||
import Header from '@components/Header.astro'
|
||||
---
|
||||
|
||||
<Header/>
|
||||
<div style="border-color: rgb(255, 0, 0); background: rgba(255, 0, 0, 0.5);" class="banner-message">
|
||||
<p>This Astro template is under development, not everything works yet.</p>
|
||||
</div>
|
||||
<slot/>
|
||||
|
||||
<style is:global lang="scss">
|
||||
body {
|
||||
margin: auto;
|
||||
max-width: 700px;
|
||||
background: #121212;
|
||||
color: white;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
a {
|
||||
color: white;
|
||||
}
|
||||
h1, h2, h3, p {
|
||||
margin: 0px;
|
||||
}
|
||||
}
|
||||
body::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 50%;
|
||||
transform: translate(-50%);
|
||||
background-image: radial-gradient(circle at 17% 77%, rgba(17, 17, 17,0.04) 0%, rgba(17, 17, 17,0.04) 50%,rgba(197, 197, 197,0.04) 50%, rgba(197, 197, 197,0.04) 100%),radial-gradient(circle at 26% 17%, rgba(64, 64, 64,0.04) 0%, rgba(64, 64, 64,0.04) 50%,rgba(244, 244, 244,0.04) 50%, rgba(0, 0, 0, 0.04) 100%),radial-gradient(circle at 44% 60%, rgba(177, 177, 177,0.04) 0%, rgba(177, 177, 177,0.04) 50%,rgba(187, 187, 187,0.04) 50%, rgba(187, 187, 187,0.04) 100%),linear-gradient(199deg, rgb(132, 167, 219),rgb(34, 2, 159)); width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
.box {
|
||||
background: transparent;
|
||||
padding: 12px 24px;
|
||||
border: 1px #525050 solid;
|
||||
border-radius: 6px;
|
||||
margin: auto;
|
||||
max-width: 700px;
|
||||
backdrop-filter: blur(10px) brightness(0.7);
|
||||
}
|
||||
.banner-message {
|
||||
background: transparent;
|
||||
padding: 12px 24px;
|
||||
border: 1px #525050 solid;
|
||||
border-radius: 6px;
|
||||
margin: auto;
|
||||
max-width: 700px;
|
||||
backdrop-filter: blur(10px) brightness(0.7);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
</style>
|
||||
7
src/lib/authorizer.ts
Normal file
7
src/lib/authorizer.ts
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
import { Authorizer } from '@authorizerdev/authorizer-js'
|
||||
|
||||
export const Auth = new Authorizer({
|
||||
authorizerURL: import.meta.env.authorizerURL,
|
||||
redirectURL: import.meta.env.redirectURL,
|
||||
clientID: import.meta.env.clientID
|
||||
})
|
||||
155
src/pages/account.astro
Normal file
155
src/pages/account.astro
Normal file
|
|
@ -0,0 +1,155 @@
|
|||
---
|
||||
// Page Layout
|
||||
import Layout from "@layouts/Default.astro"
|
||||
|
||||
// Icons
|
||||
import { EditPencil } from "@iconoir/vue"
|
||||
|
||||
// Authorizer
|
||||
import { Auth } from "@library/authorizer"
|
||||
const { data } = await Auth.login({
|
||||
email: "korbs@sudovanilla.com",
|
||||
password: "SuperSecretPassword1$",
|
||||
});
|
||||
|
||||
// For Message Banners
|
||||
if (Astro.url.pathname.endsWith('?=verification-email-sent')) {
|
||||
var EmailVerificationSent = true
|
||||
} else {
|
||||
var EmailVerificationSent = false
|
||||
}
|
||||
if (Astro.url.pathname.endsWith('?=updated')) {
|
||||
var Updated = true
|
||||
} else {
|
||||
var Updated = false
|
||||
}
|
||||
---
|
||||
|
||||
<Layout>
|
||||
{data.user.email_verified ?
|
||||
null
|
||||
:
|
||||
<div style="border-color: rgb(255, 0, 0); background: rgba(255, 0, 0, 0.5);" class="banner-message">
|
||||
<p>Your email has not been verified. <a href="#">Send Verification Email</a></p>
|
||||
</div>
|
||||
}
|
||||
{EmailVerificationSent ?
|
||||
<div style="border-color: rgb(56, 174, 111);; background: rgba(56, 174, 111, 0.5);" class="banner-message">
|
||||
<p>A verification email was sent, don't forget to check your spam folder</p>
|
||||
</div>
|
||||
:
|
||||
null
|
||||
}
|
||||
{Updated ?
|
||||
<div style="border-color: rgb(56, 174, 111);; background: rgba(56, 174, 111, 0.5);" class="banner-message">
|
||||
<p>Updated</p>
|
||||
</div>
|
||||
:
|
||||
null
|
||||
}
|
||||
<div class="box">
|
||||
<div class="account-top-area">
|
||||
<div class="user-basic">
|
||||
<img width="160px" src={data.user.picture} />
|
||||
<div>
|
||||
<h2>{data.user.given_name}</h2>
|
||||
<p>{data.user.email}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="user-actions">
|
||||
<button style="cursor: default; opacity: 0.5;" id="disable">Disable Account</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="update-forms">
|
||||
<form action="/api/account/update-picture" method="post">
|
||||
<p>Profile Picture</p>
|
||||
<div class="field">
|
||||
<input name="picture" type="url" value={data.user.picture}/>
|
||||
<button type="submit"><EditPencil /></button>
|
||||
</div>
|
||||
</form>
|
||||
<form action="/api/account/update-username" method="post">
|
||||
<p>Username</p>
|
||||
<div class="field">
|
||||
<input name="username" value={data.user.given_name}/>
|
||||
<button type="submit"><EditPencil /></button>
|
||||
</div>
|
||||
</form>
|
||||
<form action="/api/account/update-email" method="post">
|
||||
<p>Email</p>
|
||||
<div class="field">
|
||||
<input name="email" type="email" value={data.user.email}/>
|
||||
<button type="submit"><EditPencil /></button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
<style lang="scss">
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
.account-top-area {
|
||||
margin: 24px 0px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
#disable {
|
||||
color: white;
|
||||
background: rgb(170, 93, 93);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 6px 12px;
|
||||
}
|
||||
}
|
||||
.user-basic {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
p {
|
||||
color: #a5a5a5;
|
||||
}
|
||||
img {
|
||||
width: 72px;
|
||||
border-radius: 5rem;
|
||||
border: 2px #525050 solid;
|
||||
}
|
||||
}
|
||||
.update-forms {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
margin: 24px 0px;
|
||||
p {
|
||||
font-size: 14px;
|
||||
color: #a5a5a5;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.field {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
button {
|
||||
color: white;
|
||||
background: rgb(121, 121, 152);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 0px 6px;
|
||||
svg {
|
||||
width: 16px;
|
||||
}
|
||||
}
|
||||
input {
|
||||
background: rgba(60, 60, 83, 0.5);
|
||||
border: 2px transparent solid;
|
||||
border-radius: 4px;
|
||||
color: white;
|
||||
max-width: 156px;
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: rgb(125, 125, 191);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
17
src/pages/api/account/send-verification-email.ts
Normal file
17
src/pages/api/account/send-verification-email.ts
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
import type { APIRoute } from "astro"
|
||||
import { Auth } from '../../../lib/authorizer'
|
||||
|
||||
export const POST: APIRoute = async ({ request, cookies, redirect }) => {
|
||||
const formData = await request.formData()
|
||||
const username = formData.get("username")?.toString()
|
||||
|
||||
if (!username) {
|
||||
return new Response("Your username can't be empty.", { status: 400 })
|
||||
}
|
||||
|
||||
const { data, errors } = await Auth.verifyEmail({
|
||||
token: // I don't know what to put here yet
|
||||
})
|
||||
|
||||
return redirect("/account?=verification-email-sent")
|
||||
}
|
||||
20
src/pages/api/account/update-username.ts
Normal file
20
src/pages/api/account/update-username.ts
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
import type { APIRoute } from "astro"
|
||||
import { Auth } from '../../../lib/authorizer'
|
||||
|
||||
export const POST: APIRoute = async ({ request, cookies, redirect }) => {
|
||||
const formData = await request.formData()
|
||||
const username = formData.get("username")?.toString()
|
||||
|
||||
if (!username) {
|
||||
return new Response("Your username can't be empty.", { status: 400 })
|
||||
}
|
||||
|
||||
const { data, errors } = await Auth.updateProfile({
|
||||
given_name: username
|
||||
})
|
||||
|
||||
return redirect("/account")
|
||||
}
|
||||
|
||||
// Error
|
||||
// [ { message: 'unauthorized', path: [ 'update_profile' ] } ]
|
||||
26
src/pages/api/auth/signin.ts
Normal file
26
src/pages/api/auth/signin.ts
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
import type { APIRoute } from "astro"
|
||||
import { Auth } from '../../../lib/authorizer'
|
||||
|
||||
export const POST: APIRoute = async ({ request, cookies, redirect }) => {
|
||||
const formData = await request.formData()
|
||||
// const username = formData.get("username")?.toString()
|
||||
const email = formData.get("email")?.toString()
|
||||
const password = formData.get("password")?.toString()
|
||||
|
||||
if (!email || !password) {
|
||||
return new Response("Email and password is required.", { status: 400 })
|
||||
}
|
||||
|
||||
const { data, errors } = await Auth.login({
|
||||
email: email,
|
||||
password: password
|
||||
})
|
||||
|
||||
Auth.getToken({
|
||||
grant_type: 'refresh_token',
|
||||
refresh_token: data.access_token
|
||||
})
|
||||
|
||||
cookies.set("sb-access-token", data.access_token, {path: "/",})
|
||||
return redirect("/account")
|
||||
}
|
||||
10
src/pages/index.astro
Normal file
10
src/pages/index.astro
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
---
|
||||
// Page Layout
|
||||
import Layout from "@layouts/Default.astro"
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<div style="text-align: center; width: fit-content;" class="box">
|
||||
<p>To get started, <a href="/login">login</a>.</p>
|
||||
</div>
|
||||
</Layout>
|
||||
21
src/pages/login.astro
Normal file
21
src/pages/login.astro
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
---
|
||||
// Page Layout
|
||||
import Layout from "@layouts/Default.astro"
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<div style="text-align: center; width: fit-content;" class="box">
|
||||
<form action="/api/auth/signin" method="post">
|
||||
<label>Email</label>
|
||||
<input name="email" type="email" value="korbs@sudovanilla.com" required/>
|
||||
|
||||
<br/>
|
||||
|
||||
<label>Password</label>
|
||||
<input name="password" type="password" value="SuperSecretPassword1$" minlength="6">
|
||||
|
||||
<br/>
|
||||
<button type="submit">Login</button>
|
||||
</form>
|
||||
</div>
|
||||
</Layout>
|
||||
10
tsconfig.json
Normal file
10
tsconfig.json
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@components/*": ["src/components/*"],
|
||||
"@layouts/*": ["src/layouts/*"],
|
||||
"@library/*": ["src/lib/*"]
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in a new issue