authentication.spa v10.3.1

authentication.spa

Authentication page for all Babbel properties (MTech Popty Ping)

API Authentication

To know how the Authentication API works check out the documentation

Infrastructure and logical flows

You can find diagrams on the app's architecture and the currently supported flows in the docs folder and for more details about the internals, reporting and monitoring please check the runbook on confluence.

Prerequisites

• Ruby should be installed in your machine

• The web_translate_it ruby gem should be installed

  $ gem install web_translate_it -g

Setup

Create .env file

In order to run the app as a logged-in user, BABBEL_EMAIL and BABBEL_PASSWORD must be declared in your environment. Create a .env file at the project root making a copy from .env.example to set the variables as follows:

BABBEL_EMAIL=your_real_staging_email@babbel.com
BABBEL_PASSWORD=your_real_staging_password

Set up wti

Initialise wti to create the .wti configuration file in the root of the project

$ wti init

When it asks you for an API key, go to the Web Translate It project in the browser and look for the public, read-only Project API key: https://webtranslateit.com/en/projects/20312-authentication-spa-Login-Signup-for-Babbel/edit

Pull the keys

$ npm run wti

Set up npm registry

We use the GitHub Packages registry for node packages within the @lessonnine namespace. To be able to fetch those packages, follow the documentation to create an access token for your GitHub user and to configure the registry on your local machine.

Install node dependencies

$ npm install

Setup Local Captcha

In order to use it in the local environment it is necessary to set up a local captcha following the instructions below:

Recaptcha

• Go to Google Captcha and fill in the form as follows:

  • Label: the name you want to give to your CAPTCHA
  • reCAPTCHA type: reCAPTCHA v2
    • "I'm not a robot" Checkbox
  • Domains: localhost
  • Owners: yourBabbelUsername@babbel.com
  • Accept the reCAPTCHA Terms of Service

• You will be redirected to another page where your Site Key and your Secret Key are.

• Copy the value of your Site Key and use it to replace the value of captchaConfig.params.site_key in the file /src/viewLayer/components/shared/CaptchaFeature/index.js as follows:

  export const extractCaptchaKey = (captchaConfig) =>
    captchaConfig ? YOUR_CAPTCHA_SITE_KEY : null;

Hcaptcha

• Go to the hcaptcha site and create an account/login
• Click on sites and then 'New Site'
• Add a hostname with a domain (must have a domain) eg. 'testhost.com'
• Set mode to 'always challenge'
• Set passing threshold to easy (to make testing simpler)

By default, hcaptcha blocks localhost, this is why you need to come up with a different hostname. Now you need to serve the app locally under that hostname:

• On mac: edit your /private/etc/hosts file to map your laptop IP to your host name, eg. add this line 127.0.0.1 testhost.com
• In the project add allowedHosts: "all" to the config in scripts/webpack/devServer/index.js to let webpack know you want to serve from a different host than localhost
• Run the app locally and when trying to access it eg. via http://testhost.com:8080/de/authentication/login/email it should work!

Running locally

• Build the application:

  $ npm run build:development

• Run the application

  • As a logged out user:

    $npm run start

  • As a logged in user:

    $npm run start:logged-in

• Access the app locally in the browser following the URL pattern below: http://localhost:8080/LOCALE/ENVIRONMENT/

For example: http://localhost:8080/fr/test/login/email

Testing

Testing workflow

When testing a feature or change in authentication.spa one should follow these steps: 1. Define and document test cases in TestRail when necessary. 2. Have the team review the test cases. 3. Deploy the feature to a staging environment. 4. Run test cases on major browsers, inc iOS + Android. 5. In case there are UI changes go through the designs along with the designer. 6. Comment on tickets if necessary. 7. Approve ticket or raise bugs when necessary. 8. Post the bugs in the channel so the team is aware of it. 9. Run a quick sanity check once the feature is deployed to production.

Regression testing

The web regression test cases for Authentication can be found here in Testrail. The credentials to access TestRail are stored in 1password. All regression test cases should be run manually across Chrome (including the checking of tracking events), followed by a smoke test on Firefox, Safari, Edge, Android (Chrome), and iOS (Safari).

Feature testing

When testing a feature one should make sure that the acceptance criteria have been met, and the other functionalities still work as expected while running the regression tests.

Semantic Versioning

Every PR introduces a version update. The version can be updated by running npm version patch/minor/major.

• patch: backward compatible bug fixes/improvements
• minor: backward compatible new feature
• major: changes that break backward compatibility

Useful links

• Production: https://my.babbel.com/en_GB/authentication/login/email
• Staging:
  • Default: https://my.babbel.cn/en_GB/authentication/login/email
  • Biscuit: https://my.babbel.cn/en_GB/authentication-biscuit/login/email
  • Mazapan: https://my.babbel.cn/en_GB/authentication-mazapan/login/email
  • Celery: https://my.babbel.cn/en_GB/authentication-celery/login/email
  • Choco: https://my.babbel.cn/en_GB/authentication-choco/login/email
• Kibana:
  • Production: https://melvin.babbel.com
  • Staging: https://melvin.babbel.cn