Authentication Button

The frontend part of the authorization system for the final projects in the web and media programming course at Hochschule Anhalt

You do not need to interact with the authorization at all.

Everything is handled by this component and the backend service.

• Link to GitLab repository
• Link to NPM package
• To install with npm, type npm i @hs-anhalt/auth-button into the command line inside of your project directory

This component comes with the CSS class auth-button. You could style it like so:

.auth-button {
  padding: 1rem;
  font-size: x-large;
}

These are the possible props:

REQUIRED - authServiceURL The url of the authorization service which is used to retrieve the JWT. You will be provided the URL.

REQUIRED - serviceBaseURLs In this array, you must provide the base URLs of the services that require authentication. For instance, if you needed the JWT in the Authorization header when requesting a service at https://webengineering.ins.hs-anhalt.de, then that would be a base service URL. Base URLs are URLs containing ONLY the protocol and the domain, but no trailing slash or any other routes

These URLs are allowed:

• https://google.com
• https://hs-anhalt.de
• https://youtube.com
• https://webengineering.ins.hs-anhalt.de

These URLs are NOT allowed:

• https://google.com/
• https://www.hs-anhalt.de/nc/studieren/orientierung/studienangebot/detail/angewandte-informatik-digitale-medien-und-spieleentwicklung-bachelor-of-science-1.html
• https://www.youtube.com/results?search_query=example

OPTIONAL - onAuthorize A callback function that will be called once the user has authenticated.

OPTIONAL - scopes Defaults to "api". The API scopes that the service needs to fetch the relevant data. api is enough for the final projects, so you do not need to specify this.

OPTIONAL - text Defaults to "Authenticate!". The text inside the button.

Example:

import { useState } from "react";
import AuthButton from "@hs-anhalt/auth-button"

function App() {
  const { isLoading, setLoading } = useState(true);

  return isLoading ? (
    <AuthButton
      authServiceURL="http://localhost:443"
      serviceBaseURLs={["http://localhost:8000"]}
      text="Click on me to start the authentication!"
      scopes="api"
      onAuthorize={() => setLoading(false)}
    />
  ) : (
    <div>Congratulations, you are now authorized!</div>
  );
}