Skip to content

Instantly share code, notes, and snippets.

@augustin64

augustin64/login-with-args.html

Last active March 8, 2025 08:36
Show Gist options
  • Save augustin64/62e4dc5419610e7074f76f7e4d36e780 to your computer and use it in GitHub Desktop.
Save augustin64/62e4dc5419610e7074f76f7e4d36e780 to your computer and use it in GitHub Desktop.
Download ZIP
Specify code-server password in url parameter
Raw
login-with-args.html
<html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="style-src 'self'; script-src 'self' 'unsafe-inline'; manifest-src 'self'; img-src 'self' data:; font-src 'self' data:;">
<title>code-server login</title>
<link rel="icon" href="./_static/src/browser/media/favicon-dark-support.svg">
<link rel="alternate icon" href="./_static/src/browser/media/favicon.ico">
<link rel="manifest" href="./manifest.json" crossorigin="use-credentials">
<link rel="apple-touch-icon" sizes="192x192" href="./_static/src/browser/media/pwa-icon-192.png">
<link rel="apple-touch-icon" sizes="512x512" href="./_static/src/browser/media/pwa-icon-512.png">
<link href="./_static/src/browser/pages/global.css" rel="stylesheet">
<link href="./_static/src/browser/pages/login.css" rel="stylesheet">
<meta id="coder-options" data-settings="{&quot;base&quot;:&quot;.&quot;,&quot;csStaticBase&quot;:&quot;./_static&quot;,&quot;codeServerVersion&quot;:&quot;4.2.0&quot;}">
</head>
<body>
<div class="center-container">
<div class="card-box">
<div class="header">
<h1 class="main">Welcome to code-server</h1>
<div class="sub">Please log in below.</div>
</div>
<div class="content">
<form class="login-form" method="post" action="/login">
<input class="user" type="text" autocomplete="username">
<input id="base" type="hidden" name="base" value=".">
<input id="href" type="hidden" name="href">
<div class="field">
<input required="" autofocus="" class="password" type="password" placeholder="PASSWORD" name="password" autocomplete="current-password">
<input class="submit -button" value="SUBMIT" type="submit">
</div>
</form>
</div>
</div>
</div>
<script>
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const password = urlParams.get('password');
document.getElementsByClassName("password")[0].value = password;
document.getElementById("href").value = document.location;
window.history.pushState("NULL", "Login", "/login");
document.getElementsByClassName("login-form")[0].submit()
</script>
</body></html>
@augustin64
Copy link
Author

This HTML page is a convenient way to log in to code-server using /login-with-args.html?password=xxxx.
This is a feature that is not in code-server (see coder/code-server#1285) but can be pretty useful.

Using code-server with nginx with SSL certificates from Let's Encrypt, you can configure it this way:
nginx server block:

    server {
        listen          80 ssl http2; # 80 being exposed port
        listen          [::]:80 ssl http2;
        server_name     code.mydomain.com;

        ssl_certificate /etc/letsencrypt/live/code.mydomain.com/fullchain.pem;
        ssl_certificate_key /etc/letsencrypt/live/code.mydomain.com/privkey.pem;
        ssl_session_cache shared:SSL:5m;
        ssl_session_timeout 10m;
        ssl_protocols                   TLSv1 TLSv1.1 TLSv1.2;
        ssl_prefer_server_ciphers       on;

        location / {
            proxy_pass http://code_server; # Specify its location using `upstream` directive
            proxy_set_header Host $host;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection upgrade;
            proxy_set_header Accept-Encoding gzip;
        }

        location /.well-known { # For certbot challenges
            root /a/certain/path/used/as/webroot/for/certbot;
        }

        location /login-with-args.html {
            alias /opt/code-server/login-with-args.html;
        }
    }

@russau
Copy link

russau commented Sep 25, 2024

If I understand right. Here's how this works:

  • location /login-with-args.html in the nginix config effectively adds a login-with-args.html route to your code server
  • client side code in the login-with-args.html page grabs the password from ?password=abc in the querystring, sets the password input in the form, pushes /login into browser history, then submits the form.

Curious - why is the pushState needed? So a back navigation takes you to the right place?

@augustin64
Copy link
Author

If I understand right. Here's how this works:

* `location /login-with-args.html` in the nginix config effectively adds a `login-with-args.html` route to your code server

* client side code in the `login-with-args.html` page grabs the password from `?password=abc` in the querystring, sets the password input in the form,  pushes `/login` into browser history, then submits the form.

Curious - why is the pushState needed? So a back navigation takes you to the right place?

Hello, you are correct about how it works.
What is not detailed here is that the login form requires to be submitted from the /login url.
pushState just changes the current url to go to the right place before submitting the form, and without reloading the page (see this)

@russau
Copy link

russau commented Sep 26, 2024

awesome thx!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment