Make .env.example work out of the box (#43)

.env.example

@@ -6,6 +6,12 @@ DEV_PROXY_SERVER_PORT=3000
 # used for encrypting session cookies
 SESSION_COOKIE_SECRET=enfix-glue-game-sermon-cinema-monarch-fog-hiccup-neighborhood-important
 
-# oauth providers
-TWITCH_CLIENT_ID=
-TWITCH_CLIENT_SECRET=
+# oauth providers (you must provide at least 1 pair of keys for the auth to be enabled)
+# TWITCH_CLIENT_ID=
+# TWITCH_CLIENT_SECRET=
+# GOOGLE_CLIENT_ID=
+# GOOGLE_CLIENT_SECRET=
+# SPOTIFY_CLIENT_ID=
+# SPOTIFY_CLIENT_SECRET=
+# DISCORD_CLIENT_ID=
+# DISCORD_CLIENT_SECRET=

client/src/components/UserAccountDemo.tsx

@@ -8,39 +8,52 @@ import type { CSSProperties } from "react"
 import { definition as accountsDefinition } from "server/api/routes/accounts"
 
 export function UserAccountDemo() {
-	const auth = useAuthContext()
-
 	return (
 		<>
 			<Title
 				icon="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWxvY2sta2V5aG9sZSI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxNiIgcj0iMSIvPjxyZWN0IHg9IjMiIHk9IjEwIiB3aWR0aD0iMTgiIGhlaWdodD0iMTIiIHJ4PSIyIi8+PHBhdGggZD0iTTcgMTBWN2E1IDUgMCAwIDEgMTAgMHYzIi8+PC9zdmc+"
 				title="Authentication"
 			/>
 			<Divider full />
-			{auth.type === "signed-in" && (
+			<DynamicAuthContent />
+		</>
+	)
+}
+
+const DynamicAuthContent = () => {
+	const auth = useAuthContext()
+
+	if (!auth.providers.length) {
+		return <p>No OAuth API keys specified in the .env file, auth is disabled.</p>
+	}
+
+	switch (auth.type) {
+		case "signed-in":
+			return (
 				<LoggedIn
 					userId={auth.userId}
 					signOut={auth.signOut}
 					linkAccount={auth.linkAccount}
 					providers={auth.providers}
 				/>
-			)}
-			{auth.type === "creating-account" && (
+			)
+		case "creating-account":
+			return (
 				<CreateAccount
 					createAccount={auth.createAccount}
 					cancelCreateAccount={auth.cancelCreateAccount}
 					providers={auth.providers}
 				/>
-			)}
-			{auth.type === "unauthenticated" && (
+			)
+		case "unauthenticated":
+			return (
 				<NotLoggedIn
 					submitInviteCode={auth.submitInviteCode}
 					signIn={auth.signIn}
 					providers={auth.providers}
 				/>
-			)}
-		</>
-	)
+			)
+	}
 }
 
 function CreateAccount({