open-index/open-npm huggingface dataset:
npm package: @hs-anhalt/auth-button
Description: A component that allows users to authenticate with GitLab and receive a JWT containing all the necessary data.
Author: jonas.wunsch@student.hs-anhalt.de
Latest version: 1.2.36

# 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](https://gitlab.hs-anhalt.de/zwischenprojekte/authentication-button)
- [Link to NPM package](https://www.npmjs.com/package/@hs-anhalt/auth-button)
- 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:

```css
.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:

```jsx
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>
  );
}
```