Add custom Google authentication handler with landing page

tupui · tupui · commit 6eae034b670b · 2023-10-25T19:40:30.000+02:00
diff --git a/Dockerfile b/Dockerfile
@@ -69,8 +69,9 @@ CMD ["panel", "serve", "panel/app.py", \
      "--allow-websocket-origin", "www.simdec.io", \
      "--allow-websocket-origin", "simdec-panel-h6musew72q-lz.a.run.app", \
      "--cookie-secret", "panel_cookie_secret_oauth", \
+     "--basic-login-template", "panel/login.html", \
      "--logout-template", "panel/logout.html", \
-     "--oauth-provider", "google", \
+     "--oauth-provider", "custom_google", \
      "--static-dirs", "_static=_static", \
      "--reuse-sessions", "--warm", \
      "--global-loading-spinner"]
diff --git a/Makefile b/Makefile
@@ -43,22 +43,13 @@ serve-dev:  ## Serve Panel dashboard - Dev mode
  		--static-dirs _static=docs/_static \
  		--reuse-sessions --warm
 
-serve:  ## Serve Panel dashboard - Prod mode with basic auth. Needs: PANEL_TOKEN
-	panel serve panel/app.py \
-		--show \
-		--cookie-secret panel_cookie_secret_oauth \
-		--basic-login-template panel/login.html \
-		--logout-template panel/logout.html \
-		--static-dirs _static=docs/_static \
-		--reuse-sessions --warm
-
 serve-oauth:  ## Serve Panel dashboard - Prod mode with OAuth2. Needs: PANEL_OAUTH_REDIRECT_URI, PANEL_OAUTH_KEY, PANEL_OAUTH_SECRET, PANEL_OAUTH_ENCRYPTION
 	PANEL_OAUTH_SCOPE=email panel serve panel/app.py \
 		--show \
 		--cookie-secret panel_cookie_secret_oauth \
 		--basic-login-template panel/login.html \
 		--logout-template panel/logout.html \
-		--oauth-provider google \
+		--oauth-provider custom_google \
 		--static-dirs _static=docs/_static \
 		--reuse-sessions --warm
 
diff --git a/panel/login.html b/panel/login.html
@@ -5,7 +5,7 @@
     <meta charset="utf-8">
     <meta content="width=device-width, initial-scale=1.0" name="viewport">
     <meta content="en" name="docsearch:language">
-    <title>Panel App | Login</title>
+    <title>SimDec App | Login</title>
     <link rel="icon" type="image/x-icon" href="_static/icon.png">
     <style>
     * {
@@ -40,64 +40,40 @@
       padding: 2em;
       width: 350px;
     }
-    .form-input {
-      background: #fafafa;
-      border: 1px solid #eeeeee;
-      padding: 12px;
-      width: 100%;
-    }
-    .form-group {
+    .group {
       margin-bottom: 1em;
     }
-    .form-button {
+    .button {
       background: #107bba;
       border: 1px solid #ddd;
       color: #ffffff;
       padding: 10px;
       text-transform: uppercase;
       width: 100%;
     }
-    .form-button:hover {
+    .button:hover {
       background: #0072b5;
     }
-    .form-header {
-      text-align: center;
-    }
-    .form-footer {
+    .header {
       text-align: center;
     }
     #logo {
       margin-top: 2em;
     }
-    #error-message {
-      text-align: center;
-      margin-bottom: 0em;
-    }
     </style>
 </head>
 <body>
   <div class="wrap">
     <form class="login-form" action="./login" method="post">
-      <div class="form-header">
+      <div class="header">
         <h3><img id="logo" src="_static/logo.gif" width="150" height="150"></h3>
         <br>
-        <p> Login to access your application</p>
-      </div>
-      <div id="error-message" class="form-group">
-        <p style="color:rgb(255, 0, 0);font-weight:bold" class="errormessage">{{errormessage}}</p>
+        <p> Login to access SimDec App.</p>
       </div>
       <p></p>
-      <!--Email Input-->
-      <div class="form-group">
-        <input name="username" type="text" class="form-input" autocapitalize="off" autocorrect="off" placeholder="username">
-      </div>
-      <!--Password Input-->
-      <div class="form-group">
-        <input name="password" type="password" class="form-input" placeholder="password">
-      </div>
       <!--Login Button-->
-      <div class="form-group">
-        <button class="form-button" type="submit">Login</button>
+      <div class="group">
+        <button class="button" type="submit">Login</button>
       </div>
       <div><small></small></div>
     </form>
diff --git a/pyproject.toml b/pyproject.toml
@@ -77,6 +77,9 @@ build.targets.sdist.exclude = [
   "Dockerfile",
 ]
 
+[project.entry-points."panel.auth"]
+custom_google = "simdec.auth:CustomGoogleLoginHandler"
+
 [tool.pytest.ini_options]
 addopts = "--durations 10"
 testpaths = [
diff --git a/src/simdec/auth.py b/src/simdec/auth.py
@@ -0,0 +1,17 @@
+from panel.auth import GoogleLoginHandler
+from panel.io.resources import CDN_DIST
+
+
+class CustomGoogleLoginHandler(GoogleLoginHandler):
+    def _simple_get(self):
+        html = self._login_template.render(errormessage="", PANEL_CDN=CDN_DIST)
+        self.write(html)
+
+    async def get(self):
+        if "login" in self.request.uri and "state" not in self.request.uri:
+            self._simple_get()
+        else:
+            await super().get()
+
+    async def post(self):
+        await super().get()

Original file line number	Diff line number	Diff line change
`@@ -77,6 +77,9 @@ build.targets.sdist.exclude = [`
`77`	`77`	`"Dockerfile",`
`78`	`78`	`]`
`79`	`79`
	`80`	`+[project.entry-points."panel.auth"]`
	`81`	`+custom_google = "simdec.auth:CustomGoogleLoginHandler"`
	`82`	`+`
`80`	`83`	`[tool.pytest.ini_options]`
`81`	`84`	`addopts = "--durations 10"`
`82`	`85`	`testpaths = [`