Auth Form Demo

Two different ways of doing auth for oversite apps.

Basic frontend-only auth

This is not actually secure, but good enough to protect non-public resources. Wrap your content in an auth-form element. Even if it's a web component, as long as the auth-form component initializes first, there shouldn't be any issues with the inner components running first. Use btoa('admin') and btoa('password') to generate the encoded frontend-only username and password (or comma-separated lists of usernames and passwords like btoa('password1,password2')). Then set the attributes on the component like this: <auth-form user="YWRtaW4sanVzdGlu" pass="cGFzc3dvcmQscGFzcw=="></auth-form>

Content here is only visible to logged in users. You can use the auth-form component to wrap any content you want to protect. It will show a login form if the user is not logged in, and will show the content if they are logged in.

date-year:

Backend auth

This is secure, but you need to have the full backend server running, and users need to be configured in the root .env file: <auth-form api-url="/api/auth" logout-reloads="true"></auth-form>

Content here is only visible to logged in users.

Event Log