Merge pull request #764 from reactioncommerce/akarshit-revert-account-js

revert: "feat: breaking use account-js for authentication"

Author: Akarshit

.env.example

@@ -1,10 +1,21 @@
 CANONICAL_URL=http://localhost:4000
+ENABLE_SPA_ROUTING=true
 BUILD_GRAPHQL_URL=http://localhost:3000/graphql
 EXTERNAL_GRAPHQL_URL=http://localhost:3000/graphql
 INTERNAL_GRAPHQL_URL=http://api.reaction.localhost:3000/graphql
+OAUTH2_ADMIN_PORT=4445
+OAUTH2_ADMIN_URL=http://hydra.reaction.localhost:4445
+OAUTH2_AUTH_URL=http://localhost:4444/oauth2/auth
+OAUTH2_CLIENT_ID=example-storefront
+OAUTH2_CLIENT_SECRET=CHANGEME
+OAUTH2_PUBLIC_LOGOUT_URL=http://localhost:4444/oauth2/sessions/logout
+OAUTH2_HOST=hydra.reaction.localhost
+OAUTH2_IDP_PUBLIC_CHANGE_PASSWORD_URL=http://localhost:4100/account/change-password?email=EMAIL&from=FROM
+OAUTH2_IDP_HOST_URL=http://identity.reaction.localhost:4100
+OAUTH2_TOKEN_URL=http://hydra.reaction.localhost:4444/oauth2/token
 PORT=4000
 SEGMENT_ANALYTICS_SKIP_MINIMIZE=true
 SEGMENT_ANALYTICS_WRITE_KEY=ENTER_KEY_HERE
 SESSION_MAX_AGE_MS=2592000000
 SESSION_SECRET=CHANGEME
-STRIPE_PUBLIC_API_KEY=ENTER_STRIPE_PUBLIC_KEY_HERE
+STRIPE_PUBLIC_API_KEY=ENTER_STRIPE_PUBLIC_KEY_HERE

.env.prod

@@ -1,10 +1,21 @@
 CANONICAL_URL=http://localhost:4000
+ENABLE_SPA_ROUTING=true
 BUILD_GRAPHQL_URL=http://localhost:3000/graphql
 EXTERNAL_GRAPHQL_URL=http://localhost:3000/graphql
 INTERNAL_GRAPHQL_URL=http://api.reaction.localhost:3000/graphql
+OAUTH2_ADMIN_PORT=4445
+OAUTH2_ADMIN_URL=http://hydra.reaction.localhost:4445
+OAUTH2_AUTH_URL=http://localhost:4444/oauth2/auth
+OAUTH2_CLIENT_ID=example-storefront
+OAUTH2_CLIENT_SECRET=CHANGEME
+OAUTH2_PUBLIC_LOGOUT_URL=http://localhost:4444/oauth2/sessions/logout
+OAUTH2_HOST=hydra.reaction.localhost
+OAUTH2_IDP_PUBLIC_CHANGE_PASSWORD_URL=http://localhost:4100/account/change-password?email=EMAIL&from=FROM
+OAUTH2_IDP_HOST_URL=http://identity.reaction.localhost:4100
+OAUTH2_TOKEN_URL=http://hydra.reaction.localhost:4444/oauth2/token
 PORT=4000
 SEGMENT_ANALYTICS_SKIP_MINIMIZE=true
 SEGMENT_ANALYTICS_WRITE_KEY=ENTER_KEY_HERE
 SESSION_MAX_AGE_MS=2592000000
 SESSION_SECRET=CHANGEME
-STRIPE_PUBLIC_API_KEY=ENTER_STRIPE_PUBLIC_KEY_HERE
+STRIPE_PUBLIC_API_KEY=ENTER_STRIPE_PUBLIC_KEY_HERE

README.md

@@ -5,7 +5,6 @@
 This Example Storefront is to serve as a reference on how to implement a web based storefront using the Reaction Commerce GraphQL API. You can fork this project as a jumping off point or create your own custom experience using your prefered client-side technology. While we believe our example storefront is full featured enough to use in production, it may be missing features your shop requires at this time.
 
 ## Features
-
 Reaction comes with a robust set of core commerce capabilities right out of the box. And since anything in our codebase can be extended, overwritten, or installed as a package, you may also customize anything on our platform.
 
 Check out the full list of Reaction [features](https://www.reactioncommerce.com/features) and [release history](https://reactioncommerce.com/roadmap) for more info.
@@ -26,11 +25,12 @@ This example storefront is built with [Next.js](https://nextjs.org/), [React](ht
 Follow the [Reaction Platform docs](https://docs.reactioncommerce.com/docs/installation-reaction-platform) to install and run all the services necessary to run the storefront:
 
 | Directory: Service                                                                            | URL                                              |
-| --------------------------------------------------------------------------------------------- | ------------------------------------------------ |
+|-----------------------------------------------------------------------------------------------|--------------------------------------------------|
 | [`reaction`](https://github.com/reactioncommerce/reaction): GraphQL API                       | [localhost:3000/graphql](localhost:3000/graphql) |
 | [`reaction`](https://github.com/reactioncommerce/reaction): GraphQL Playground developer tool | [localhost:3000/graphql](localhost:3000/graphql) |
 | [`reaction`](https://github.com/reactioncommerce/reaction): Reaction Admin                    | [localhost:4080](localhost:4080)                 |
 | [`reaction`](https://github.com/reactioncommerce/reaction): MongoDB                           | [localhost:27017](localhost:27017)               |
+| [`reaction-hydra`](https://github.com/reactioncommerce/reaction-hydra): Authentication        | [localhost:4444](localhost:4444)                 |
 | [`example-storefront`](https://github.com/reactioncommerce/example-storefront): Storefront    | [localhost:4000](localhost:4000)                 |
 
 **Note**: The storefront has redirects so that if you open [http://localhost:4000/graphql](http://localhost:4000/graphql), you'll be redirected to the GraphQL Playground.
@@ -51,37 +51,32 @@ When running the storefront and Reaction for the first time, you will need to co
 Read the docs for [setting up Segment or a custom analytics tracker](docs/tracking-events.md)
 
 ## Documentation
-
 - [Example Storefront full documentation](./docs)
 - [Example Storefront Component Library repository](https://github.com/reactioncommerce/reaction-component-library), [documentation](https://github.com/reactioncommerce/reaction-component-library/tree/master/docs), and [component documentation](http://designsystem.reactioncommerce.com/)
 - [Reaction Docs: Using GraphQL](https://docs.reactioncommerce.com/docs/graphql-using)
 - [Reaction Docs: Testing with Jest](https://docs.reactioncommerce.com/docs/testing-reaction)
-- [Reaction Docs: Developing with Docker](https://docs.reactioncommerce.com/docs/installation-docker-development)
+- [Reaction Docs: Developing with Docker](https://docs.reactioncommerce.com/docs/installation-docker-development
+)
 
 ## Development
 
 The Reaction Platform runs the storefront with Docker, so you will have to use Docker commands to view logs, run commands inside the container and more. To run commands specifically for the storefront, make sure to change directories into the `example-storefront` directory within the `reaction-platform` repository:
-
 ```sh
 cd example-storefront
 ```
 
 ### Build and run in development mode with logs
-
 Create a symbolic link to use the development Docker image:
-
 ```
 ln -s docker-compose.dev.yml docker-compose.override.yml
 ```
 
 If running for the first time or environment variables in `.env.example` have changed execute the command below to update environment variables.
-
 ```
 ./bin/setup
 ```
 
 Start the storefront by executing:
-
 ```sh
 docker-compose up -d && docker-compose logs -f
 ```
@@ -99,31 +94,26 @@ docker-compose run --rm --service-ports web yarn start
 ```sh
 docker-compose run --rm web [command]
 ```
-
 Run any command inside a Docker container and then remove the container. Use this to run any tooling operations. Remember your project directory will be mounted and things will usually just work. See Yarn section below for more examples.
 
 ### Run tests in container
 
 Run tests locally
-
 ```sh
 docker-compose run --rm web yarn test
 ```
 
 Run tests locally without cache (this can be helpful if changes aren't showing up)
-
 ```sh
 docker-compose run --rm web yarn test --no-cache
 ```
 
 To run Snyk security tests (this will run tests in the same way as CI)
-
 ```sh
 docker-compose run --rm web sh -c "cp package.json ../ && cp .snyk ../ && cd .. && snyk auth && snyk test"
 ```
 
 To run ESLint
-
 ```sh
 docker-compose run --rm web eslint src
 ```
@@ -139,15 +129,13 @@ You can use the Google Chrome DevTools to debug the code running in the Node.js
 
 Yarn & NPM should run inside the Docker container. We've taken steps to ensure that the node_modules are placed into a cacheable location. If you run Yarn locally, the node_modules are written directly to the project directory and take precedence over those from the Docker build.
 **Yarn Add**
-
 ```
 docker-compose run --rm web yarn add --dev [package]
 ```
 
 **Yarn Install**
 
 ⚠️ Always rebuild the image and start a new container after modifying yarn.lock or Dockerfile!
-
 ```
 docker-compose run --rm web yarn install
 docker-compose down --rmi local
@@ -167,29 +155,25 @@ Sometimes we need to test the [Example Storefront Component Library](https://git
 1. Inside your `.env` file, change `INTERNAL_GRAPHQL_URL` to equal `http://localhost:3000/graphql`, the same as the `EXTERNAL_GRAPHQL_URL`
 1. Start the storefront locally by running the command `export $(cat .env | xargs) && yarn dev`
 1. Your storefront should now be running at `localhost:4000`
-   - If you see errors about not being able to find peer dependency packages, that seems to be an issues with yarn linking. You can just temporarily `yarn add` each of those packages in the component library `package/dist` folder. (This folder is gitignored anyway.)
+    - If you see errors about not being able to find peer dependency packages, that seems to be an issues with yarn linking. You can just temporarily `yarn add` each of those packages in the component library `package/dist` folder. (This folder is gitignored anyway.)
 1. After your changes are tested, shut down the storefront by running the command `CTRL+C`
 1. Run `yarn unlink "@reactioncommerce/components"` in the storefront repo folder
 1. `cd` to the `package/dist` folder of the `reaction-component-library` repo. Run the command `yarn unlink` to unlink the local version of the component library
 1. Undo the renaming of your `.yarnrc` file
 1. Undo the URL change inside your `.env` file
 
 ## Clean up containers
-
 Stop, and retain containers:
-
 ```sh
 docker-compose stop
 ```
 
 Stop, and remove containers:
-
 ```sh
 docker-compose down
 ```
 
 Stop, and remove containers, volumes and built images:
-
 ```sh
 docker-compose down -v --rmi local
 ```
@@ -203,7 +187,6 @@ Run this command to build a Docker image with the production build of the app in
 ```sh
 docker build --network=host -t  reactioncommerce/example-storefront:X.X.X .
 ```
-
 Where X.X.X indicates the tag version you want to use, i.e. `3.1.0`
 
 Then, to start the app on your machine, make sure the Reaction API container is already running and enter:
@@ -231,37 +214,28 @@ Want to request a feature? Use our [Reaction Feature Requests repository](https:
 We love your pull requests! Check our our [`Good First Issue`](https://github.com/reactioncommerce/example-storefront/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22) and [`Help Wanted`](https://github.com/reactioncommerce/example-storefront/issues?q=label%3A%22help+wanted%22) tags for good issues to tackle.
 
 ### Pull Request guidelines
-
 Pull requests should pass all automated tests, style, and security checks.
 
 #### Automated Tests
-
 Your code should pass all [acceptance tests and unit tests](https://docs.reactioncommerce.com/reaction-docs/trunk/testing-reaction). Run
-
 ```sh
 docker-compose run --rm web yarn test
 ```
-
 to run the test suites locally. If you're adding functionality to Reaction, you should add tests for the added functionality. You can run the tests locally without cache if necessary by passing the `--no-cache` flag. This can be helpful if changes aren't showing up.
-
 ```sh
 docker-compose run --rm web yarn test --no-cache
 ```
 
 To update a failing snapshot (if you've made changes to a component)
-
 ```sh
 docker-compose run --rm web yarn test -u
 ```
 
 #### Eslint
-
 We require that all code contributed to Reaction follows [Reaction's ESLint rules](https://github.com/reactioncommerce/reaction-eslint-config). You can run
-
 ```
 docker-compose run --rm web eslint src
 ```
-
 to run ESLint against your code locally.
 
 Please follow the [Reaction Code Style Guide](https://docs.reactioncommerce.com/docs/styleguide). Check out our guides to [JSDoc](https://docs.reactioncommerce.com/docs/jsdoc-style-guide), [Git](https://docs.reactioncommerce.com/docs/git-style-guide), [error handling](https://docs.reactioncommerce.com/docs/error-handling-guide), [logging](https://docs.reactioncommerce.com/docs/logging), and [React](https://docs.reactioncommerce.com/docs/react-best-practices).
@@ -271,9 +245,7 @@ We also request that you follow the our [pull request template](https://docs.rea
 Get more details in our [Contributing Guide](https://docs.reactioncommerce.com/docs/contributing-to-reaction).
 
 ### Developer Certificate of Origin
-
 We use the [Developer Certificate of Origin (DCO)](https://developercertificate.org/) in lieu of a Contributor License Agreement for all contributions to Reaction Commerce open source projects. We request that contributors agree to the terms of the DCO and indicate that agreement by signing all commits made to Reaction Commerce projects by adding a line with your name and email address to every Git commit message contributed:
-
 ```
 Signed-off-by: Jane Doe <[email protected]>
 ```
@@ -286,20 +258,20 @@ We use the [Probot DCO GitHub app](https://github.com/apps/dco) to check for DCO
 
 If you forget to sign your commits, the DCO bot will remind you and give you detailed instructions for how to amend your commits to add a signature.
 
-## License
 
-Copyright 2019 Reaction Commerce
+## License
+   Copyright 2019 Reaction Commerce
 
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
 
        http://www.apache.org/licenses/LICENSE-2.0
 
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
 
 [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Freactioncommerce%2Fexample-storefront.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2Freactioncommerce%2Fexample-storefront?ref=badge_large)

apiUtils/localeMiddleware.js

@@ -3,7 +3,8 @@ import redirect from "./redirect";
 
 export default (req, res) => {
   const {
-    query: { slug, ...rest }
+    query: { slug },
+    _parsedUrl
   } = req;
 
   const fallback = "de";
@@ -40,7 +41,7 @@ export default (req, res) => {
     found = fallback;
   }
 
-  const queryPart = rest ? (`?${Object.keys(rest).map((k) => `${k}=${rest[k]}`).join("&")}`) : "";
+  const queryPart = (_parsedUrl && _parsedUrl.query) ? `?${_parsedUrl.query}` : "";
 
   if (slug) {
     return redirect(res, 302, `/${found}${slug ? `/${slug.join("/")}` : ""}${queryPart}`);

apiUtils/passportMiddleware.js

@@ -0,0 +1,53 @@
+import OAuth2Strategy from "passport-oauth2";
+import passport from "passport";
+import sessions from "client-sessions";
+import appConfig from "../config.js";
+import redirect from "./redirect";
+
+export { default as passport } from "passport";
+
+let baseUrl = appConfig.CANONICAL_URL;
+if (!baseUrl.endsWith("/")) baseUrl = `${baseUrl}/`;
+
+const oauthRedirectUrl = `${baseUrl}callback`;
+
+// This is needed to allow custom parameters (e.g. loginActions) to be included
+// when requesting authorization. This is setup to allow only loginAction to pass through
+OAuth2Strategy.prototype.authorizationParams = function (options = {}) {
+  return { loginAction: options.loginAction };
+};
+
+passport.use("oauth2", new OAuth2Strategy({
+  authorizationURL: appConfig.OAUTH2_AUTH_URL,
+  tokenURL: appConfig.OAUTH2_TOKEN_URL,
+  clientID: appConfig.OAUTH2_CLIENT_ID,
+  clientSecret: appConfig.OAUTH2_CLIENT_SECRET,
+  callbackURL: oauthRedirectUrl,
+  state: true,
+  scope: ["offline", "openid"]
+}, (accessToken, refreshToken, params, profile, cb) => {
+  cb(null, { accessToken, refreshToken, idToken: params.id_token });
+}));
+
+passport.serializeUser((user, done) => {
+  done(null, JSON.stringify(user));
+});
+
+passport.deserializeUser((user, done) => {
+  done(null, JSON.parse(user));
+});
+
+export default (handler) => (req, res) => {
+  if (!res.redirect) {
+    res.redirect = (location) => redirect(res, 302, location);
+  }
+
+  sessions({
+    cookieName: "session", // This name is required so passport picks it up correctly
+    secret: appConfig.SESSION_SECRET,
+    duration: appConfig.SESSION_MAX_AGE_MS
+  })(req, res, () =>
+    passport.initialize()(req, res, () =>
+      passport.session()(req, res, () =>
+        handler(req, res))));
+};

bin/start

@@ -8,5 +8,7 @@ IFS="$(printf "\n\t")"
 
 cd "$(dirname "$0")/.."
 yarn install
-
-yarn start:dev
+printf "Waiting for Hydra service...  "
+./bin/wait-for.sh "${OAUTH2_HOST}:${OAUTH2_ADMIN_PORT}"
+printf "Hydra service found!\n"
+yarn start:dev