Login / signup areas are created within a specific directory of the site named /auth/. Users trying to access an auth: required area will be redirected to this directory.

Common Layout

The following is a typical layout for a private site with a login area.

Private Site

/index.html 
/👤.yaml 
  auth: required

Auth Area

/auth/index.html
/auth/👤.yaml
  auth: optional

Note that the /auth/ directory is within the private site.

A variation of this layout applies to nested sites. The private site may be nested at a sub-path of a public site:

Public Site

/index.html
/👤.yaml
  auth: optional
/🔌app.yaml
  source: [source-to-private-site]
  namespace: application

For the deployment of "Public Site", the private site and auth area will be accessible from /app/ and /app/auth/ respectively.

Login Widget

Building a login widget that lists providers is relatively simple. All configured login providers for the site are accessible from the Providers object. These providers may vary from test environment to the production environment. {{provider.brand}} is well-defined identifier such as github or google, suitable for targeting with CSS. Take note of the special itemprop='content-security-policy in the example below:

<!--TEMPLATE mustache-->
...

{{% import {Me, Providers} from '👤' }} 
<link itemprop='content-security-policy' data-form-action-auth='true'>

...
<div class="provider-list">
    {{! Login }}
    {{^Me}}
    {{#Providers.all as provider}}
    <form id="{{provider.type}}" method="post" class="provider-form" action="{{provider.authPath}}">
    <button type="submit" class="provider-button provider-{{provider.brand}}">
        <div class="provider-icon">{{! CSS target }}</div>
        <div class="provider-text">{{🎨.login-with provider.name}}</div>
    </button>
    </form>
    {{/Providers.all}}
    {{/Me}}

    {{! Logout }}
    {{#Me}}
    <form method="post" class="provider-form" action="/__/auth/provider/logout">
        <button type="submit" class="provider-button provider-logout">
            <div class="provider-icon">{{! CSS target }}</div>
            <div class="provider-text">{{🎨.logout}}</div>
        </button>
    </form>
    {{/Me}}
</div>

Previous Logins

Previously successful logins may be recognized using localStorage and the key /auth/provider. The following adds an is-recognized class to the body if a previous login has occurred. This class could be used to show a "Welcome Back!" button for example.

document.addEventListener('DOMContentLoaded', ()=>{
    var prevSuccessId = localStorage.getItem('/auth/provider');

    if (prevSuccessId) document.body.classList.add('is-recognized');
});

The localStorage key /auth/provider contains the unique type of the user provider which was last used to login. This value may be used to indicate to the user on the UI which provider they last logged in with.

document.addEventListener('DOMContentLoaded', ()=>{
    var prevSuccessId = localStorage.getItem('/auth/provider');
    
    if (prevSuccessId){
        var e = document.getElementById(prevSuccessId);
        if (e != null) e.classList.add('provider-previous');
    }
});

In this example assume that prevSuccessId is google. It finds the element having id="google", and applies the class provider-previous to indicate to the CSS that the last login was done using google.

Providers

For a list of available providers see integrations. Providers have the following properties:

name

Name of the provider, suitable for display to the visitor logging in.

type

Unique identifier type.

brand

Brand identifier suitable for CSS styling. Multiple providers may have the same brand.