Giter VIP home page Giter VIP logo

frontend-app-authn's Introduction

frontend-app-authn

Build Status Continuous Integration Codecov semantic-release

Purpose

This is a micro-frontend application responsible for the login, registration and password reset functionality.

What is the domain of this MFE?

  • Register page
  • Login page
  • Forgot password page
  • Reset password page
  • Progressive profiling page

Getting Started

Installation

This MFE is bundled with Devstack, see the Getting Started section for setup instructions.

  1. Install Devstack using the Getting Started instructions.
  2. Start up LMS, if it's not already started.
  1. Within this project (frontend-app-authn), install requirements and start the development server:

    npm install
    npm start # The server will run on port 1999
    
  2. Once the dev server is up, visit http://localhost:1999 to access the MFE

    ./docs/images/frontend-app-authn-localhost-preview.png

    Note: Follow Enable social auth locally for enabling Social Sign-on Buttons (SSO) locally

Environment Variables/Setup Notes

This MFE is configured via environment variables supplied at build time. All micro-frontends have a shared set of required environment variables, as documented in the Open edX Developer Guide under Required Environment Variables.

The authentication micro-frontend also requires the following additional variable:

Environment Variables
Name Description / Usage Example
LOGIN_ISSUE_SUPPORT_LINK The fully-qualified URL to the login issue support page in the target environment. https://support.example.com
ACTIVATION_EMAIL_SUPPORT_LINK The fully-qualified URL to the activation email support page in the target environment. https://support.example.com
PASSWORD_RESET_SUPPORT_LINK The fully-qualified URL to the password reset support page in the target environment. https://support.example.com
AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK The fully-qualified URL to the progressive profiling support page in the target environment. https://support.example.com
TOS_AND_HONOR_CODE The fully-qualified URL to the Honor code page in the target environment. https://example.com/honor
TOS_LINK The fully-qualified URL to the Terms of service page in the target environment. https://example.com/tos
PRIVACY_POLICY The fully-qualified URL to the Privacy policy page in the target environment. https://example.com/privacy
INFO_EMAIL The valid email address for information query regarding the target environment. [email protected]
ENABLE_DYNAMIC_REGISTRATION_FIELDS Enables support for configurable registration fields on the MFE. This flag must be enabled to show any required registration field besides the default fields (name, email, username, password). true | '' (empty strings are falsy)
ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN Enables support for progressive profiling. If enabled, users are redirected to a second page where data for optional registration fields can be collected. true | '' (empty strings are falsy)
DISABLE_ENTERPRISE_LOGIN Disables the enterprise login from Authn MFE. true | '' (empty strings are falsy)
MFE_CONFIG_API_URL Link of the API to get runtime mfe configuration variables from the site configuration or django settings. /api/v1/mfe_config | '' (empty strings are falsy)
APP_ID Name of MFE, this will be used by the API to get runtime configurations for the specific micro frontend. For a frontend repo frontend-app-appName, use appName as APP_ID. authn | ''
ENABLE_IMAGE_LAYOUT Enables the image layout feature within the authn. When set to True, this feature allows the inclusion of images in the base container layout. For more details on configuring this feature, please refer to the Modifying base container. true | '' (empty strings are falsy)

edX-specific Environment Variables

Furthermore, there are several edX-specific environment variables that enable integrations with closed-source services private to the edX organization, and might be unsupported in Open edX.

edX-specific Environment Variables
Name Description / Usage Example
MARKETING_EMAILS_OPT_IN Enables support for opting in marketing emails that helps us getting user consent for sending marketing emails. true | '' (empty strings are falsy)
SHOW_CONFIGURABLE_EDX_FIELDS For edX, country and honor code fields are required by default. This flag enables edX specific required fields. true | '' (empty strings are falsy)

For more information see the document: Micro-frontend applications in Open edX.

How To Contribute

Contributions are very welcome, and strongly encouraged! We've put together some documentation that describes our contribution process.

Even though they were written with edx-platform in mind, the guidelines should be followed for Open edX code in general.

PR description template should be automatically applied if you are sending PR from github interface; otherwise you can find it it at PULL_REQUEST_TEMPLATE.md

This project is currently accepting all types of contributions, bug fixes and security fixes.

Getting Help

If you're having trouble, we have discussion forums at https://discuss.openedx.org where you can connect with others in the community.

Our real-time conversations are on Slack. You can request a Slack invitation, then join our community Slack workspace. Because this is a frontend repository, the best place to discuss it would be in the #wg-frontend channel.

For anything non-trivial, the best path is to open an issue in this repository with as many details about the issue you are facing as you can provide.

https://github.com/openedx/frontend-app-authn/issues

For more information about these options, see the Getting Help page.

The Open edX Code of Conduct

All community members are expected to follow the Open edX Code of Conduct.

People

The assigned maintainers for this component and other project details may be found in Backstage. Backstage pulls this data from the catalog-info.yaml file in this repo.

Reporting Security Issues

Please do not report security issues in public. Please email [email protected].

Known Issues

None

License

The code in this repository is licensed under the GNU Affero General Public License v3.0, unless otherwise noted.

Please see LICENSE for details.


frontend-app-authn's People

Contributors

abdullahwaheed avatar adeelkhan avatar ahtesham-quraish avatar attiyaishaque avatar bilalqamar95 avatar dependabot[bot] avatar dmytroalipov avatar edx-requirements-bot avatar edx-semantic-release avatar feanil avatar hopewise avatar iamsobanjaved avatar jawayria avatar lunyachek avatar mashal-m avatar mubbsharanwar avatar omarithawi avatar renovate-bot avatar renovate[bot] avatar sarina avatar shafqatfarhan avatar shahbaz-shabbir05 avatar syed-ali-abbas-zaidi avatar syedsajjadkazmii avatar usamasadiq avatar uzairr avatar vladislavkeblysh avatar waheedahmed avatar yoiber071 avatar zainab-amir avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

frontend-app-authn's Issues

Remove dependency on edx-enterprise

In trying to include the AuthN MFE in the Tutor release of Olive, we found that the login API used by this MFE requires edx-enterprise to be deployed and configured, so that even if DISABLE_ENTERPRISE_LOGIN is set to true in the MFE, logins cannot work without it.

It should be possible to use this MFE without the edx-enterprise requirement.

edX was hardcoded in the cookie banner

in the cookie banner can we change "edX and its members..." to "{PLATFORM_NAME} and its members..."
Is there a way to set the cookie banner off by default?

Bug: tpa button in contact with sign in button

Screenshot 2023-03-29 at 7 45 44 PM

When the third party authentication is enabled, it comes in contact with the sign in button. It can be modified by adding a class "mb-3" for the sign-in button.

Has anyone already made any modification on these?

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

  • chore(deps): update dependency @openedx/frontend-build to v14.1.1
  • chore(deps): update dependency eslint-plugin-import to v2.30.0
  • fix(deps): update dependency query-string to v9
  • fix(deps): update dependency react-redux to v9
  • fix(deps): update dependency react-responsive to v10
  • fix(deps): update dependency redux to v5
  • fix(deps): update dependency redux-thunk to v3
  • fix(deps): update dependency reselect to v5
  • fix(deps): update dependency universal-cookie to v7
  • 🔐 Create all rate-limited PRs at once 🔐

Warning

Renovate failed to look up the following dependencies: Could not determine new digest for update (cdnjs package iframe-resizer/iframeResizer.contentWindow.min.js).

Files affected: public/index.html


Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Detected dependencies

github-actions
.github/workflows/add-depr-ticket-to-depr-board.yml
.github/workflows/add-remove-label-on-comment.yml
.github/workflows/autoupdate-pull-request.yml
  • ubuntu 20.04
.github/workflows/ci.yml
  • actions/checkout v3
  • actions/setup-node v4
  • codecov/codecov-action v4
  • ubuntu 20.04
.github/workflows/commitlint.yml
.github/workflows/lockfileversion-check.yml
.github/workflows/self-assign-issue.yml
html
public/index.html
  • iframe-resizer 4.4.4@sha512-IWwZFBvHzN41wNI6etRLLuLrDDj/6AwJcPt7cmKJAzluYTIHHQ1PF8wh0rSy05jxEvvjflVvH2MxeV6riyEEXg==
npm
package.json
  • @edx/brand ^1.2.2
  • @edx/frontend-platform ^8.0.0
  • @edx/openedx-atlas ^0.6.0
  • @fortawesome/fontawesome-svg-core 6.6.0
  • @fortawesome/free-brands-svg-icons 6.6.0
  • @fortawesome/free-solid-svg-icons 6.6.0
  • @fortawesome/react-fontawesome 0.2.2
  • @openedx/paragon ^22.1.1
  • @optimizely/react-sdk ^2.9.1
  • @redux-devtools/extension 3.3.0
  • @testing-library/react ^12.1.5
  • @testing-library/react-hooks ^8.0.1
  • algoliasearch ^4.14.3
  • algoliasearch-helper ^3.14.0
  • classnames 2.5.1
  • core-js 3.38.1
  • fastest-levenshtein 1.0.16
  • form-urlencoded 6.1.5
  • prop-types 15.8.1
  • query-string 7.1.3
  • react ^17.0.2
  • react-dom ^17.0.2
  • react-helmet 6.1.0
  • react-loading-skeleton 3.4.0
  • react-redux 7.2.9
  • react-responsive 8.2.0
  • react-router 6.26.1
  • react-router-dom 6.26.1
  • react-zendesk ^0.1.13
  • redux 4.2.1
  • redux-logger 3.0.6
  • redux-mock-store 1.5.4
  • redux-saga 1.3.0
  • redux-thunk 2.4.2
  • regenerator-runtime 0.14.1
  • reselect 4.1.8
  • universal-cookie 4.0.4
  • @edx/browserslist-config ^1.1.1
  • @edx/reactifex 1.1.0
  • @openedx/frontend-build ^14.0.3
  • babel-plugin-formatjs 10.5.16
  • eslint-plugin-import 2.29.1
  • glob 7.2.3
  • history 5.3.0
  • husky 7.0.4
  • jest 29.7.0
  • react-test-renderer ^17.0.2
nvm
.nvmrc

  • Check this box to trigger a request for Renovate to run again on this repository

When accessing the Authn MFE first time, It shows "Authn | null" in the header

Whenever I clicked on 'Sign In' button, it takes me to the Authn MFE. The issue is that it shows 'Authn | null' in the header. The reason is that in public/index.html, the header is <title>Authn | <%= process.env.SITE_NAME %></title>. For first time, the process.env.SITE_NAME is null and after that mergeConfig runs which updates SITE_NAME. Due to that thing, it shows Authn | null which is not a good user experience. I will suggest to remove | <%= process.env.SITE_NAME %> and its better to just show Authn only in title. Here is the screenshot:

Screenshot 2024-02-09 at 10 12 25 AM

I am running openedx using tutor local

Documentation needed for how to customize UI

I use a plugin to customize the registration fields. It would be good if it could be documented how to do that in the context of this new frontend as well. (Clearly it would involve setting ENABLE_DYNAMIC_REGISTRATION_FIELDS, but it's not clear where the actual other fields would be set, or how their values would be retrieved.)

Thank you for your kind consideration of this ticket.

Regression? Terms of Service and Privacy Policy links broken on registration page

Under the new student registration page is the following text/code with broken links:

By creating an account, you agree to the [Terms of Service and Honor Code](https://apps.test.mydomain.com/authn/register?next=%2F#)
[in a new tab](https://apps.test.mydomain.com/authn/register?next=%2F#) and you acknowledge that MyLongSiteNameTest and each Member process your personal data in accordance with the [Privacy Policy](https://apps.test.mydomain.com/authn/register?next=%2F#)
[in a new tab](https://apps.test.mydomain.com/authn/register?next=%2F#).

Those "Terms of Service and Honor Code" and "Privacy Policy" links are broken by default, and go nowhere, except back to the registration page itself.

FWIW on my previous instance (which is using tutor indigo theme, though I don't know if that matters), the URL for the terms of service is "test.mydomain.com/tos". I think that was the default URL.

Is this expected breakage, and there's somewhere I'm supposed to change these URLs? Or is this unexpected breakage that just no one has reported yet for Olive.3?

Switch to Ansible-free Docker image

In order to advance implementation of both OEP-45: Configuring and Operating Open edX and openedx/public-engineering#51, we would like to switch devstack from using primarily Docker images built with Ansible code from the configuration repository to images built from Dockerfiles in each service's repository. We hope this will also help simplify Tutor by providing better base images to derive from, with fewer workarounds and duplicated code blocks required in Tutor.

A/C

Ensure that the repo's Dockerfile can create a base image which is appropriate for small production installations
Ensure that the repo's Dockerfile also defines an additional image derived from the base which adds dependencies and configuration changes needed for development environments
Check with the Tutor developers during code review to see if any further changes to the Dockerfile would help simplify Tutor
Automate uploads of both images when code changes are merged
Switch devstack to use the new Ansible-free development image, and do some basic testing to ensure it works before merging

Upgrade React JS to v17

This repo is currently using React JS v16. We need to upgrade it to React 17 before moving to latest React version(v18).
React 17 doesn’t add any new developer-facing features, so its upgrade might not cause any breaking changes. Our end goal is to upgrade React to v18 but v18 no longer support enzyme, so we are upgrading to React 17 and then we’ll migrate from enzyme.

Epic Link

React 17 upgrade

Full Name validation needs to be improved

When registering as a user in authn MFE Register tab, there is a full Name field.

  • That field allows user to enter single character. I believe that the validation should update and must allow to enter at least 3 characters.
  • The full name field is accepting the special characters as well. Full name doesn't contain any special characters so validation should include only alphabets

image


image

Test frontend-app-authn on Ubuntu 24.04

This repository is using Ubuntu 20.04 for testing. That version of Ubuntu will be out of support before Teak. Therefore this repo needs to be updated to testing with Ubuntu 24.04 before Sumac is cut to allow everyone sufficient time to switch to the new version.

Update this repository to test with Ubuntu 24.04 so that we can make the switch.

  • Tests are run and passing on Ubuntu 20.04 and 24.04
  • If major changes were needed and this is a library, a new version is published to PyPI or NPM

Note: In some cases, it may not make sense to test with both the old and the new version. For example, if the workflow is running linting or publishing to a package manager. In these cases, simply update the workflow to run on the newer version or opt to set it to ubuntu-latest instead if it doesn't matter what version it's running on. If you're unsure, reach out to the maintenance working group in #wg-maintenance in slack for guidance.

Known affected workflow files:

  • .github/workflows/autoupdate-pull-request.yml
  • .github/workflows/ci.yml

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.