@hs-anhalt/auth-button v1.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
- 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>
);
}
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago