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

View file

@ -7,9 +7,12 @@ in this repository provides the UI components that are required by Hydra.
## Setup
- create certificates for the IDP, the application and Hydra. You can use the
testca from the [CAcert developer setup](https://git.dittberner.info/jan/cacert-devsetup)
like this:
### Certificates
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
@ -47,9 +50,20 @@ in this repository provides the UI components that are required by Hydra.
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
- setup the Hydra database
```
openssl x509 -in $PATH_TO_DEVSETUP_TESTCA/class3/ca.crt.pem \
-out client_ca.pem
```
### Setup Hydra
We use the ORY Hydra OAuth2 / OpenID Connect implementation. Install Hydra
according to their [documentation](https://www.ory.sh/hydra/docs/install).
The setup has been tested with the Linux binary installation.
Perform the Hydra database setup:
```
sudo -i -u postgres psql
@ -60,7 +74,7 @@ in this repository provides the UI components that are required by Hydra.
hydra migrate sql "postgres://hydra_local:${YOUR_POSTGRESQL_PASSWORD}@localhost:5432/hydra_local"
```
- create a configuration file for Hydra i.e. hydra.yaml:
Create a configuration file for Hydra i.e. ``hydra.yaml``:
```
serve:
@ -110,15 +124,20 @@ in this repository provides the UI components that are required by 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
systemd-nss module. You therefore need to define Hydra's hostnames in your
``/etc/hosts`` file:
```
::1 auth.cacert.localhost hydra.cacert.localhost
```
This is required to allow Hydra to start properly
### Add OpenID Connect configuration for a client
- create an OIDC client configuration for the demo application
Create an OpenID Connect (OIDC) client configuration for the demo application
```
hydra clients create --endpoint https://hydra.cacert.localhost:4445/ \
@ -130,26 +149,30 @@ in this repository provides the UI components that are required by Hydra.
--client-uri https://register.cacert.localhost:3000/info/app
```
the command returns a client id and a client secret that you need to
configure for the demo application
The command returns a client id and a client secret, that you need for the
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
such a key using the following openssl command:
The Identity Provider application (IDP) requires a strong random key for its
CSRF cookie. You can generate such a key using the following openssl command:
```
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]
csrf.key = "<32 bytes of base64 encoded data>"
[db]
dsn = "$MYSQL_USER:$MYSQL_PASSWORD@tcp(localhost:13306)/cacert
```
- create a configuration for the Demo application
### Configure the Demo Application
You will need a 32 byte and a 64 byte random secret for the session
authentication and encryption keys:
@ -159,6 +182,9 @@ in this repository provides the UI components that are required by Hydra.
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>"
@ -169,6 +195,26 @@ in this repository provides the UI components that are required by Hydra.
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:
```

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'),
filename: 'js/[name].bundle.js',
},
devtool: 'source-map',
optimization: {
minimize: true,
minimizer: [new TerserPlugin()],
@ -59,14 +60,14 @@ module.exports = {
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: function () {
return [
require('precss'),
require('autoprefixer'),
];
}
}
}
plugins: [
[
'precss',
'autoprefixer',
],
],
},
},
}, {
loader: 'sass-loader',
}]

2397
yarn.lock Normal file

File diff suppressed because it is too large Load diff