Add Setup, authentication of Outline VPN

apps/outline-vpn/.env.example

@@ -0,0 +1,3 @@
+NEXT_PUBLIC_GOOGLE_CLIENT_ID=
+NEXT_PUBLIC_GOOGLE_CLIENT_SECRET=
+NEXT_PUBLIC_ALLOWED_EMAILS=[email protected],[email protected]

apps/outline-vpn/README.md

@@ -5,21 +5,14 @@ This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next
 First, run the development server:
 
 ```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
+pnpm dev --filter="outline-vpn"
+
 ```
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
 You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
-
 ## Learn More
 
 To learn more about Next.js, take a look at the following resources:
@@ -28,9 +21,3 @@ To learn more about Next.js, take a look at the following resources:
 - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
 
 You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

apps/outline-vpn/package.json

@@ -17,6 +17,7 @@
     "@mui/material": "^5.14.20",
     "@react-oauth/google": "^0.12.1",
     "google-auth-library": "^9.6.3",
+    "jwt-decode": "^4.0.0",
     "next": "14.1.0",
     "react": "^18",
     "react-dom": "^18"

apps/outline-vpn/src/app/dashboard/page.tsx

@@ -1,13 +1,12 @@
 import Dashboard from "@/outline-vpn/app/components/Dashboard";
 import { getUsers, getHeaderProps } from "@/outline-vpn/app/data";
-import { logoutUser } from "../utils";
+import { redirect } from "next/navigation";
 
 export async function Page(): Promise<JSX.Element | null> {
   const users = await getUsers();
   const header = await getHeaderProps();
-
-  if (!header) {
-    return null;
+  if (!header || !users) {
+    return redirect("/");
   }
   return <Dashboard users={users} header={header} />;
 }

apps/outline-vpn/src/middleware.ts

@@ -1,14 +1,21 @@
 import { NextResponse } from "next/server";
 import type { NextRequest } from "next/server";
 import { cookies } from "next/headers";
+import { jwtDecode } from "jwt-decode";
+import { GoogleUser } from "@/outline-vpn/app/types";
 
 export async function middleware(request: NextRequest) {
+  const allowedEmails =
+    process.env.NEXT_PUBLIC_ALLOWED_EMAILS?.split(",") ?? [];
   const url = request.nextUrl.clone();
   try {
     const cookie = cookies().get("token") ?? {};
     const { value: token } = cookie as any;
-    if (token) {
-      return NextResponse.next();
+    const { email } = jwtDecode(token) as GoogleUser;
+    if (email) {
+      if (allowedEmails.includes(email)) {
+        return NextResponse.next();
+      }
     }
     url.pathname = "/";
     return NextResponse.redirect(url);