Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Reactjs todo dv new #14

Open
wants to merge 12 commits into
base: reactjs-todo-dv
Choose a base branch
from
Open

Reactjs todo dv new #14

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
8658abf
duplicate reactjs-todo app: no code changes
jon-oblander Oct 29, 2024
95032b9
delete journey folder and files
jon-oblander Oct 29, 2024
6d955d8
add davinci client files
jon-oblander Oct 29, 2024
6dcc782
additional app updates
jon-oblander Oct 29, 2024
9f0fe6d
missed debug code
jon-oblander Oct 29, 2024
549feac
refactor
jon-oblander Oct 30, 2024
7ac725b
Merge pull request #1 from jon-oblander/refactor
jon-oblander Nov 1, 2024
0a1a333
refactor updates
jon-oblander Nov 6, 2024
1c22455
refactor updates
jon-oblander Nov 6, 2024
701155e
Merge pull request #2 from jon-oblander/refactor
jon-oblander Nov 7, 2024
d74b129
move dv client to context (#3)
jon-oblander Nov 7, 2024
8070050
reset submit state
jon-oblander Nov 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 4 additions & 9 deletions reactjs-todo-dv/.env.example
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,8 @@
# APP_URL=$APP_URL # not using this for preview-environment instead, we can use window.location.origin
AM_URL=$AM_URL
API_URL=$API_URL
DEBUGGER_OFF=true
DEVELOPMENT=$DEVELOPMENT
JOURNEY_LOGIN=$JOURNEY_LOGIN
JOURNEY_REGISTER=$JOURNEY_REGISTER
PORT=$PORT
REALM_PATH=$REALM_PATH
REST_OAUTH_CLIENT=$REST_OAUTH_CLIENT
REST_OAUTH_SECRET=$REST_OAUTH_SECRET
WEB_OAUTH_CLIENT=$WEB_OAUTH_CLIENT
CENTRALIZED_LOGIN=$CENTRALIZED_LOGIN
CLIENT_ID=$CLIENT_ID
REDIRECT_URI=$REDIRECT_URI
SCOPE="openid profile email phone"
BASE_URL=$BASE_URL
64 changes: 26 additions & 38 deletions reactjs-todo-dv/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,46 +6,35 @@ This sample code is provided "as is" and is not a supported product of ForgeRock

## Requirements

1. An instance of ForgeRock's Access Manager (AM), either within a ForgeRock's Identity Cloud tenant, your own private installation or locally installed on your computer
1. A PingOne tenant with SSO and DaVinci services enabled
2. Node >= 14.2.0 (recommended: install via [official package installer](https://nodejs.org/en/))
3. Knowledge of using the Terminal/Command Line
4. Ability to generate security certs (recommended: mkcert ([installation instructions here](https://github.com/FiloSottile/mkcert#installation))
5. This project "cloned" to your computer
4. This project "cloned" to your computer

## Setup

Once you have the 5 requirements above met, we can build the project.
Once you have the requirements above met, we can build the project.

### Setup Your AM Instance
### Setup Your PingOne application

#### Configure CORS
1. Create a new OIDC Web App

1. Allowed origins: `https://localhost:8443`
2. Allowed methods: `GET` `POST`
3. Allowed headers: `Content-Type` `X-Requested-With` X-Requested-Platform` `Accept-API-Version` `Authorization`
4. Allow credentials: enable
#### Configuration

#### Create Your OAuth Clients
1. CORS Allowed origins: `http://localhost:8443`
2. Token Auth Method: None
3. Signoff URLs: http://localhost:8443/login
4. Redirect URIs: http://localhost:8443/login
5. Response Type: Code
6. Grant Type: Authorization Code

1. Create a public (SPA) OAuth client for the web app: no secret, scopes of `openid profile email`, implicit consent enabled, and no "token authentication endpoint method".
2. Create a confidential (Node.js) OAuth client for the API server: with a secret, default scope of `am-introspect-all-tokens`, and `client_secret_basic` as the "token authentication endpoint method".
#### Resources (scopes)

#### Create your Authentication Journeys/Trees
1. email phone profile

1. Login
2. Register
#### Policies

Note: The sample app currently supports the following callbacks only:

- NameCallback
- PasswordCallback
- ChoiceCallback
- ValidatedCreateUsernameCallback
- ValidatedCreatePasswordCallback
- StringAttributeInputCallback
- BooleanAttributeInputCallback
- KbaCreateCallback
- TermsAndConditionsCallback
1. DaVinci Policies: Select your DaVinci application

### Configure Your `.env` File

Expand All @@ -54,18 +43,21 @@ Change the name of `.env.example` to `.env` and replace the bracketed values (e.
Example with annotations:

```text
AM_URL=<<<URL to your AM instance>>>
APP_URL=https://localhost:8443 # in develop we do not use this variable for dynamic deployment reasons
API_URL=http://localhost:9443
DEBUGGER_OFF=false
JOURNEY_LOGIN=Login
JOURNEY_REGISTER=Registration
REALM_PATH=<<<Realm path of AM>>>
WEB_OAUTH_CLIENT=<<<Your Web OAuth client name/ID>>>
DEVELOPMENT=true
PORT=8443
CLIENT_ID=<<PingOne application client id>>
REDIRECT_URI=http://localhost:8443/login
SCOPE="openid profile email phone"
BASE_URL=https://auth.pingone.com/<<PingOne environment id>>/
```

### Installing Dependencies and Run Build

#### NOTE:a new workspace for this sample app has not been added at this point. TODO: update before releasing
#### Todo Api was modified to work with PingOne endpoints and token properties. Those modifications are not yet in this repo.

**Run from root of repo**: since this sample app uses npm's workspaces, we recommend running the npm commands from the root of the repo.

```sh
Expand All @@ -82,11 +74,7 @@ Now, run the below commands to start the processes needed for building the appli
npm run start:reactjs-todo
```

Now, you should be able to visit `https://localhost:8443`, which is your web app or client (the Relying Party in OAuth terms). This client will make requests to your AM instance, (the Authorization Server in OAuth terms), which will be running on whatever domain you set, and `http://localhost:9443` as the REST API for your todos (the Resource Server).

### Accept Cert Exceptions

You will likely have to accept the security certificate exceptions for both your React app and the Node.js server. To accept the cert form the Node.js server, you can visit `http://localhost:9443/healthcheck` in your browser. Once you receive "OK", your Node.js server is running on the correct domain and port, and the cert is accepted.
Now, you should be able to visit `http://localhost:8443`, which is your web app or client (the Relying Party in OAuth terms). This client will make requests to your AM instance, (the Authorization Server in OAuth terms), which will be running on whatever domain you set, and `http://localhost:9443` as the REST API for your todos (the Resource Server).

## Learn About Integration Touchpoints

Expand Down
91 changes: 29 additions & 62 deletions reactjs-todo-dv/client/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,46 +6,35 @@ This sample code is provided "as is" and is not a supported product of ForgeRock

## Requirements

1. An instance of ForgeRock's Access Manager (AM), either within a ForgeRock's Identity Cloud tenant, your own private installation or locally installed on your computer
1. A PingOne tenant with SSO and DaVinci services enabled
2. Node >= 14.2.0 (recommended: install via [official package installer](https://nodejs.org/en/))
3. Knowledge of using the Terminal/Command Line
4. Ability to generate security certs (recommended: mkcert ([installation instructions here](https://github.com/FiloSottile/mkcert#installation))
5. This project "cloned" to your computer
4. This project "cloned" to your computer

## Setup

Once you have the 5 requirements above met, we can build the project.
Once you have the requirements above met, we can build the project.

### Setup Your AM Instance
### Setup Your PingOne application

#### Configure CORS
1. Create a new OIDC Web App

1. Allowed origins: `https://react.example.com:8443`
2. Allowed methods: `GET` `POST`
3. Allowed headers: `Content-Type` `X-Requested-With` `Accept-API-Version` `Authorization`
4. Allow credentials: enable
#### Configuration

#### Create Your OAuth Clients
1. CORS Allowed origins: `http://localhost:8443`
2. Token Auth Method: None
3. Signoff URLs: http://localhost:8443/login
4. Redirect URIs: http://localhost:8443/login
5. Response Type: Code
6. Grant Type: Authorization Code

1. Create a public (SPA) OAuth client for the web app: no secret, scopes of `openid profile email`, implicit consent enabled, and no "token authentication endpoint method".
2. Create a confidential (Node.js) OAuth client for the API server: with a secret, default scope of `am-introspect-all-tokens`, and `client_secret_basic` as the "token authentication endpoint method".
#### Resources (scopes)

#### Create your Authentication Journeys/Trees
1. email phone profile

1. Login
2. Register
#### Policies

Note: The sample app currently supports the following callbacks only:

- NameCallback
- PasswordCallback
- ChoiceCallback
- ValidatedCreateUsernameCallback
- ValidatedCreatePasswordCallback
- StringAttributeInputCallback
- BooleanAttributeInputCallback
- KbaCreateCallback
- TermsAndConditionsCallback
1. DaVinci Policies: Select your DaVinci application

### Configure Your `.env` File

Expand All @@ -54,60 +43,38 @@ Change the name of `.env.example` to `.env` and replace the bracketed values (e.
Example with annotations:

```text
AM_URL=<<<URL to your AM instance>>>
APP_URL=https://react.example.com:8443 # in develop we do not use this variable for dynamic deployment reasons
API_URL=https://api.example.com:9443
API_URL=http://localhost:9443
DEBUGGER_OFF=false
JOURNEY_LOGIN=Login
JOURNEY_REGISTER=Registration
REALM_PATH=<<<Realm path of AM>>>
WEB_OAUTH_CLIENT=<<<Your Web OAuth client name/ID>>>
DEVELOPMENT=true
PORT=8443
CLIENT_ID=<<PingOne application client id>>
REDIRECT_URI=http://localhost:8443/login
SCOPE="openid profile email phone"
BASE_URL=https://auth.pingone.com/<<PingOne environment id>>/
```

### Installing Dependencies and Run Build

#### NOTE:a new workspace for this sample app has not been added at this point. TODO: update before releasing
#### Todo Api was modified to work with PingOne endpoints and token properties. Those modifications are not yet in this repo.

**Run from root of repo**: since this sample app uses npm's workspaces, we recommend running the npm commands from the root of the repo.

```sh
# Install all dependencies (no need to pass the -w option)
npm install

# run sample app project
# only if you want to see the app build, the serve command will do this for you
npm run build -w reactjs-todo # if in workspace root

npm run build # if in the reactjs-todo folder
```

### Update Your `/etc/hosts` File

Now you'll need to update your `hosts` (`/etc/hosts` if on a Mac) to allow for domain aliases:

```sh
sudo vim /etc/hosts
```

```text
# hosts file aliases
127.0.0.1 react.example.com api.example.com
```

### Run the Servers

Now, run the below commands to start the processes needed for building the application and running the servers for both client and API server:

```sh
# In one terminal window, run the following watch command
npm run start:reactjs-todo # only if in root

npm start # if in reactjs-todo folder
# In one terminal window, run the following watch command from the root of the repository
npm run start:reactjs-todo
```

Now, you should be able to visit `https://react.example.com:8443`, which is your web app or client (the Relying Party in OAuth terms). This client will make requests to your AM instance, (the Authorization Server in OAuth terms), which will be running on whatever domain you set, and `https://api.example.com:9443` as the REST API for your todos (the Resource Server).

### Accept Cert Exceptions

You will likely have to accept the security certificate exceptions for both your React app and the Node.js server. To accept the cert form the Node.js server, you can visit `https://api.example.com:9443/healthcheck` in your browser. Once you receive "OK", your Node.js server is running on the correct domain and port, and the cert is accepted.
Now, you should be able to visit `http://localhost:8443`, which is your web app or client (the Relying Party in OAuth terms). This client will make requests to your AM instance, (the Authorization Server in OAuth terms), which will be running on whatever domain you set, and `http://localhost:9443` as the REST API for your todos (the Resource Server).

## Learn About Integration Touchpoints

Expand Down
Loading