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>
@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