Frontend

Frontend#

Everything @plone-collective/volto-identity adds to a Volto project.

The package#

Name

@plone-collective/volto-identity

Developed against Volto

19.3.0

Peer dependencies

React 18, react-redux ^8.1.2, react-router-dom ^5.2.0, @plone/components

peerDependencies does not name @plone/volto itself. The Volto version above is what the monorepo builds against (frontend/mrs.developer.json).

Installing it is How to install the frontend.

Note

Every component in this package has a story. Browse them in Storybook to see a widget or a view rendered, with its props, without running a site. Storybook is built from this repository and published beside these pages.

Routes#

Path

Constant

Component

Layer

/login, /**/login

—

Login

core

/login-identity

CALLBACK_PATH

Callback

core

/first-login

FIRST_LOGIN_PATH

FirstLogin

core

/fallback_login

FALLBACK_LOGIN_PATH

Volto's own Login

core

/identities

IDENTITIES_PATH

Identities

core

/controlpanel/identity-providers

CONTROLPANEL_PATH

ProvidersControlPanel

core

/controlpanel/users/:userid/account

USER_ACCOUNT_PATH

UserAccount

core

/oauth-consent

CONSENT_PATH

Consent

server

/applications

APPLICATIONS_PATH

Applications

server

/controlpanel/identity-clients

CLIENTS_CONTROLPANEL_PATH

ClientsControlPanel

server

/login-identity matches the callback_url registry default, which is what makes the callback work with no configuration. See Settings.

/fallback_login keeps Volto's own username-and-password form reachable whether or not it is shown on /login.

Environment variables#

Variable

Default

Read at

RAZZLE_IDENTITY_SHOW_PLONE_LOGIN

off

run time

Read through Volto's runtimeConfig, not baked in at build time, so it can be changed without rebuilding. RAZZLE_ is the only prefix Volto carries through to the browser.

Settings#

Key

Default

What it does

config.settings.identityShowPloneLogin

false

Show Volto's username-and-password form on /login as well as the providers.

The environment variable above sets this at run time.

Views#

Registration

Content type

config.views.contentTypesViews

UserProfile

config.views.contentTypesViews

UserGroup

Each is a title and a body, because neither type has rich text.

Widgets#

Name

Used for

provider_icon

The SVG icon field on the provider form.

The backend decides which widget a field uses, through directives.widget(..., frontendOptions={"widget": ...}), and Volto looks the name up here. The frontend composes what it is served rather than describing it.

Shadowed components#

Three Volto components are shadowed, because Volto has no extension point for what each needs.

Shadowed

Why

manage/Toolbar/Toolbar.jsx

to reach the personal tools panel

manage/Toolbar/PersonalTools.tsx

to add the sign-in methods entry

manage/Controlpanels/Users/RenderUsers.tsx

to link a user row to their account page

A shadowed file here is a docstring and a re-export; the component itself lives under components/. That keeps the shadow small enough to re-check against a new Volto release.

Other registrations#

Reducers, a menu entry, and appExtras.

Contents