Improve and document frontend resource build

Document the frontend build and reformat README.md to improve structure
and readability. Switch from plain npm to yarn.
This commit is contained in:
Jan Dittberner 2021-01-02 10:42:19 +01:00
parent 49c91cddb0
commit cd61f7d3cf
4 changed files with 2569 additions and 9804 deletions

278
README.md
View file

@ -7,167 +7,213 @@ in this repository provides the UI components that are required by Hydra.
## Setup ## Setup
- create certificates for the IDP, the application and Hydra. You can use the ### Certificates
testca from the [CAcert developer setup](https://git.dittberner.info/jan/cacert-devsetup)
like this:
1. create signing requests You need a set of certificates for the IDP, the application and Hydra. You
can use the Test CA created by the ``setup_test_ca.sh`` script from the
[CAcert developer setup](https://git.dittberner.info/jan/cacert-devsetup)
repository like this:
``` 1. create signing requests
mkdir certs
cd certs ```
openssl req -new -newkey rsa:3072 -nodes \ mkdir certs
cd certs
openssl req -new -newkey rsa:3072 -nodes \
-keyout hydra.cacert.localhost.key \ -keyout hydra.cacert.localhost.key \
-out hydra.cacert.localhost.csr.pem \ -out hydra.cacert.localhost.csr.pem \
-subj /CN=hydra.cacert.localhost \ -subj /CN=hydra.cacert.localhost \
-addext subjectAltName=DNS:hydra.cacert.localhost,DNS:auth.cacert.localhost -addext subjectAltName=DNS:hydra.cacert.localhost,DNS:auth.cacert.localhost
openssl req -new -newkey rsa:3072 -nodes \ openssl req -new -newkey rsa:3072 -nodes \
-keyout idp.cacert.localhost.key \ -keyout idp.cacert.localhost.key \
-out idp.cacert.localhost.csr.pem \ -out idp.cacert.localhost.csr.pem \
-subj /CN=idp.cacert.localhost \ -subj /CN=idp.cacert.localhost \
-addext subjectAltName=DNS:idp.cacert.localhost,DNS:login.cacert.localhost,DNS:register.cacert.localhost -addext subjectAltName=DNS:idp.cacert.localhost,DNS:login.cacert.localhost,DNS:register.cacert.localhost
openssl req -new -newkey rsa:3072 -nodes \ openssl req -new -newkey rsa:3072 -nodes \
-keyout app.cacert.localhost.key \ -keyout app.cacert.localhost.key \
-out app.cacert.localhost.csr.pem \ -out app.cacert.localhost.csr.pem \
-subj /CN=app.cacert.localhost \ -subj /CN=app.cacert.localhost \
-addext subjectAltName=DNS:app.cacert.localhost -addext subjectAltName=DNS:app.cacert.localhost
cp *.csr.pem $PATH_TO_DEVSETUP_TESTCA/ cp *.csr.pem $PATH_TO_DEVSETUP_TESTCA/
``` ```
2. Use the CA to sign the certificates 2. Use the CA to sign the certificates
``` ```
pushd $PATH_TO_DEVSETUP_TESTCA/ pushd $PATH_TO_DEVSETUP_TESTCA/
for csr in hydra idp app; do for csr in hydra idp app; do
openssl ca -config ca.cnf -name class3_ca -extensions server_ext \ openssl ca -config ca.cnf -name class3_ca -extensions server_ext \
-in ${csr}.cacert.localhost.csr.pem \ -in ${csr}.cacert.localhost.csr.pem \
-out ${csr}.cacert.localhost.crt.pem -days 365 -out ${csr}.cacert.localhost.crt.pem -days 365
done done
popd popd
cp $PATH_TO_DEVSETUP_TESTCA/{hydra,idp,app}.cacert.localhost.crt.pem . cp $PATH_TO_DEVSETUP_TESTCA/{hydra,idp,app}.cacert.localhost.crt.pem .
``` ```
- install Hydra according to their documentation 3. Copy CA certificate for client certificates
```
openssl x509 -in $PATH_TO_DEVSETUP_TESTCA/class3/ca.crt.pem \
-out client_ca.pem
```
- setup the Hydra database ### Setup Hydra
``` We use the ORY Hydra OAuth2 / OpenID Connect implementation. Install Hydra
sudo -i -u postgres psql according to their [documentation](https://www.ory.sh/hydra/docs/install).
> CREATE DATABASE hydra_local ENCODING utf-8; The setup has been tested with the Linux binary installation.
> CREATE USER hydra_local WITH PASSWORD '${YOUR_POSTGRESQL_PASSWORD}';
> GRANT CONNECT, CREATE ON DATABASE hydra_local TO hydra_local;
hydra migrate sql "postgres://hydra_local:${YOUR_POSTGRESQL_PASSWORD}@localhost:5432/hydra_local" Perform the Hydra database setup:
```
- create a configuration file for Hydra i.e. hydra.yaml: ```
sudo -i -u postgres psql
> CREATE DATABASE hydra_local ENCODING utf-8;
> CREATE USER hydra_local WITH PASSWORD '${YOUR_POSTGRESQL_PASSWORD}';
> GRANT CONNECT, CREATE ON DATABASE hydra_local TO hydra_local;
``` hydra migrate sql "postgres://hydra_local:${YOUR_POSTGRESQL_PASSWORD}@localhost:5432/hydra_local"
serve: ```
admin:
host: hydra.cacert.localhost Create a configuration file for Hydra i.e. ``hydra.yaml``:
public:
host: auth.cacert.localhost ```
tls: serve:
cert: admin:
path: certs/hydra.cacert.localhost.crt.pem host: hydra.cacert.localhost
key: public:
path: certs/hydra.cacert.localhost.key host: auth.cacert.localhost
tls:
cert:
path: certs/hydra.cacert.localhost.crt.pem
key:
path: certs/hydra.cacert.localhost.key
dsn: 'postgres://hydra_local:${YOUR_POSTGRESQL_PASSWORD}@localhost:5432/hydra_local' dsn: 'postgres://hydra_local:${YOUR_POSTGRESQL_PASSWORD}@localhost:5432/hydra_local'
webfinger: webfinger:
oidc_discovery: oidc_discovery:
supported_claims: supported_claims:
- email - email
- email_verified - email_verified
- given_name - given_name
- family_name - family_name
- middle_name - middle_name
- name - name
- birthdate - birthdate
- zoneinfo - zoneinfo
- locale - locale
- https://cacert.localhost/groups - https://cacert.localhost/groups
supported_scope: supported_scope:
- profile - profile
- email - email
oauth2: oauth2:
expose_internal_errors: false expose_internal_errors: false
urls: urls:
login: https://login.cacert.localhost:3000/login login: https://login.cacert.localhost:3000/login
consent: https://login.cacert.localhost:3000/consent consent: https://login.cacert.localhost:3000/consent
logout: https://login.cacert.localhost:3000/logout logout: https://login.cacert.localhost:3000/logout
error: https://login.cacert.localhost:3000/error error: https://login.cacert.localhost:3000/error
post_logout_redirect: https://login.cacert.localhost:3000/logout-successful post_logout_redirect: https://login.cacert.localhost:3000/logout-successful
self: self:
public: https://auth.cacert.localhost:4444/ public: https://auth.cacert.localhost:4444/
issuer: https://auth.cacert.localhost:4444/ issuer: https://auth.cacert.localhost:4444/
secrets: secrets:
system: system:
- "${YOUR SECRET FOR HYDRA}" - "${YOUR SECRET FOR HYDRA}"
``` ```
- add entries for auth.cacert.localhost and hydra.cacert.localhost to /etc/hosts The available configuration options are described in the
[Hydra configuration documentation](https://www.ory.sh/hydra/docs/reference/configuration).
``` Hydra needs to be able to resolve its hostnames and does not work with the
::1 auth.cacert.localhost hydra.cacert.localhost systemd-nss module. You therefore need to define Hydra's hostnames in your
``` ``/etc/hosts`` file:
This is required to allow Hydra to start properly ```
::1 auth.cacert.localhost hydra.cacert.localhost
```
- create an OIDC client configuration for the demo application ### Add OpenID Connect configuration for a client
``` Create an OpenID Connect (OIDC) client configuration for the demo application
hydra clients create --endpoint https://hydra.cacert.localhost:4445/ \
```
hydra clients create --endpoint https://hydra.cacert.localhost:4445/ \
--callbacks https://app.cacert.localhost:4000/callback \ --callbacks https://app.cacert.localhost:4000/callback \
--logo-uri https://register.cacert.localhost:3000/images/app.png \ --logo-uri https://register.cacert.localhost:3000/images/app.png \
--name "Client App Demo" \ --name "Client App Demo" \
--scope "openid offline_access profile email" \ --scope "openid offline_access profile email" \
--post-logout-callbacks https://app.cacert.localhost:4000/after-logout \ --post-logout-callbacks https://app.cacert.localhost:4000/after-logout \
--client-uri https://register.cacert.localhost:3000/info/app --client-uri https://register.cacert.localhost:3000/info/app
``` ```
the command returns a client id and a client secret that you need to The command returns a client id and a client secret, that you need for the
configure for the demo application demo application configuration.
- create a configuration for the IDP ### Configure IDP
The IDP requires a strong random key for its CSRF cookie. You can generate The Identity Provider application (IDP) requires a strong random key for its
such a key using the following openssl command: CSRF cookie. You can generate such a key using the following openssl command:
``` ```
openssl rand -base64 32 openssl rand -base64 32
``` ```
Use this value and create `idp.toml`: Use this value and the database credentials from your cacert-devsetup and
create `idp.toml`:
``` ```
[security] [security]
csrf.key = "<32 bytes of base64 encoded data>" csrf.key = "<32 bytes of base64 encoded data>"
```
- create a configuration for the Demo application
You will need a 32 byte and a 64 byte random secret for the session
authentication and encryption keys:
```
openssl rand -base64 64
openssl rand -base64 32
```
```
[oidc]
client-id = "<client id from hydra clients invocation>"
client-secret = "<client secret from hydra clients invocation>"
[session] [db]
auth-key = "<64 bytes of base64 encoded data>" dsn = "$MYSQL_USER:$MYSQL_PASSWORD@tcp(localhost:13306)/cacert
enc-key = "<32 bytes of base64 encoded data>" ```
```
### Configure the Demo Application
You will need a 32 byte and a 64 byte random secret for the session
authentication and encryption keys:
```
openssl rand -base64 64
openssl rand -base64 32
```
You also need the client id and the client secret, that have been generated
during the OIDC client setup described above.
```
[oidc]
client-id = "<client id from hydra clients invocation>"
client-secret = "<client secret from hydra clients invocation>"
[session]
auth-key = "<64 bytes of base64 encoded data>"
enc-key = "<32 bytes of base64 encoded data>"
```
## Frontend resource build
The frontend resources are built using [webpack 5](https://webpack.js.org/)
and [yarn](https://classic.yarnpkg.com/lang/en/). You need recent nodejs
and yarn versions. See the
[Debian installation instructions](https://github.com/nodesource/distributions/blob/master/README.md#debinstall)
of nodesource or look at the other options on the
[nodejs Download page](https://nodejs.org/en/download/) if you cannot use
Debian Bullseye or newer.
When you are sure that you have nodejs >= 12 and yarn you can install the
required dependencies and run webpack like this:
```
yarn
yarn run build
```
## Start
Now you can start Hydra, the IDP and the demo app in 3 terminal windows: Now you can start Hydra, the IDP and the demo app in 3 terminal windows:

9679
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -32,6 +32,7 @@ module.exports = {
path: path.resolve(__dirname, 'static'), path: path.resolve(__dirname, 'static'),
filename: 'js/[name].bundle.js', filename: 'js/[name].bundle.js',
}, },
devtool: 'source-map',
optimization: { optimization: {
minimize: true, minimize: true,
minimizer: [new TerserPlugin()], minimizer: [new TerserPlugin()],
@ -59,18 +60,18 @@ module.exports = {
loader: 'postcss-loader', loader: 'postcss-loader',
options: { options: {
postcssOptions: { postcssOptions: {
plugins: function () { plugins: [
return [ [
require('precss'), 'precss',
require('autoprefixer'), 'autoprefixer',
]; ],
} ],
} },
} },
}, { }, {
loader: 'sass-loader', loader: 'sass-loader',
}] }]
} }
], ],
}, },
} }

2397
yarn.lock Normal file

File diff suppressed because it is too large Load diff