2023 Feb Update (Extended)
While Logto Cloud is still under construction, we would like to introduce some new features to our foundation, Logto OSS. This will be the last version before general availability.
Notable updates include:
- Refactored infrastructure and enhanced security
- Smart Input and Customize CSS added to Sign-in Experience
- Open standard connectors (SAML, OIDC, and OAuth 2.0)
- New language support
Let's take a look at what's inside!
π₯ BREAKING CHANGES π₯
Decouple normal users and admins
Logto was using a single port to serve both normal users and admins, as well as the web console. While we continuously maintain a high level of security, itβll still be great to decouple these components into two separate parts to keep data isolated and provide a flexible infrastructure.
Note
From this version, Logto listens to two ports by default, one for normal users (3001
), and one for admins (3002
).
Click to expand details
- Nothing changed for normal users. No adaption is needed.
- For admin users:
- The default Admin Console URL has been changed to
http://localhost:3002/console
. - To change the admin port, set the environment variable
ADMIN_PORT
. For instance,ADMIN_PORT=3456
. - You can specify a custom endpoint for admins by setting the environment variable
ADMIN_ENDPOINT
. For example,ADMIN_ENDPOINT=https://admin.your-domain.com
. - You can now completely disable admin endpoints by setting
ADMIN_DISABLE_LOCALHOST=1
and leavingADMIN_ENDPOINT
unset. - Admin Console and admin user data are not accessible via normal user endpoints, including
localhost
andENDPOINT
from the environment. - Admin Console no longer displays audit logs of admin users. However, these logs still exist in the database, and Logto still inserts admin user logs. There is just no convenient interface to inspect them.
- Due to the data isolation, the numbers on the dashboard may slightly decrease (admins are excluded); admin users cannot sign in to the user apps.
- The default Admin Console URL has been changed to
If you are upgrading from a previous version, simply run the database alteration command as usual, and we'll take care of the rest.
DID YOU KNOW?
Under the hood, we use the powerful Postgres feature Row-Level Security to isolate admin and user data.
CORS policy
- If
ADMIN_ENDPOINT
is not specified,localhost:[admin-port]
will be allowed to perform Cross-Origin Resource Sharing (CORS) in Logto. - If
ADMIN_ENDPOINT
is specified, only requests from the origin of ADMIN_ENDPOINT will be allowed.
π Security update
In previous versions, when registering or changing passwords, all new passwords were stored in plain text in the Audit Logs before being encrypted and inserted into the database.
In this version, we have updated the process to fully mask password fields before inserting them into the Audit Logs.
Warning
For enhanced security and compliance, we strongly recommend removing all passwords from the Audit Logs or deleting all logs that include passwords.
If you have any questions regarding this issue or the removal of data, please do not hesitate to contact us via email or Discord.
π§βπ Feature update
π‘ Smart Input for Sign-in Experience
We have integrated the traditional input fields for username, phone number, and email into a single intelligent input box:
combined-input.mov
This advanced input box automatically identifies the type of characters youβre entering, such as an @
sign or consecutive numbers, and provides relevant error feedback.
By streamlining the sign-in process, users no longer need to waste time figuring out which button to click to switch their desired login method. This reduces the risk of errors and ensures a smoother sign-in experience.
π¨ Customize CSS in Sign-in Experience
We have put a lot of effort into improving the user sign-in experience and have provided a brand color option for the UI. However, we know that fine-tuning UI requirements can be unpredictable. While Logto is still exploring the best options for customization, we want to provide a programmatic method to unblock your development.
You can now use the Management API PATCH /api/sign-in-exp
with body { "customCss": "arbitrary string" }
to set customized CSS for the sign-in experience. You should see the value of customCss
attached after <title>
of the page. If the style has a higher priority, it should be able to override.
For instance, if you want to give your sign-in page a feel of the Night City, try this CSS:
Click to expand CSS and preview
@font-face { font-family: 'Rock Salt'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/rocksalt/v18/MwQ0bhv11fWD6QsAVOZrt0M6p7NGrQ.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Share Tech'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/sharetech/v17/7cHtv4Uyi5K0OeZ7bohU8H0JmBUhfrE.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
#app * { font-family: 'Share Tech'; letter-spacing: 0.5px; }
#app > div[class$=viewBox] { background-image: url(https://silverhand.io/assets/v-in-nc.jpg); background-size: cover; }
#app main[class$=main] { background-image: url(https://silverhand.io/assets/gentle-universe.png); background-size: cover; opacity: 0.98; min-height: initial; padding: 24px; padding-bottom: 72px; border-radius: 12px; }
#app main[class$=main] img[class$=logo] { content: url(https://silverhand.io/assets/cyberpunk-2077.png); margin: -20px 0 -12px; height: 160px; }
#app main[class$=main] div[class$=headline] { visibility: hidden; height: 60px; }
#app main[class$=main] div[class$=headline]:before { content: 'Welcome to Night City'; visibility: visible; display: block; font-family: 'Rock Salt'; font-style: italic; line-height: 60px; font-size: 20px; color: rgba(245,250,255,0.6); padding: 0 20px; }
#app form div[class$=inputField] > div { outline: none; border: none; border-radius: 4px; }
#app form div[class$=inputField] > div > input, #app form div[class$=inputField] div[class$=countryCodeSelector] { background: initial; background-color: #453f67; font-family: 'Share Tech'; letter-spacing: 0.5px; font-size: 16px; font-weight: 600; }
#app button { font-weight: 600; font-size: 16px; border-radius: 4px; }
#app button[type=submit] { background: linear-gradient(270.84deg, #2FD6FB -24.55%, #6369FC 44.33%, #A741EB 119.2%), #5D34F2; }
"We have a city to burn!"
Note
Since Logto uses CSS Modules, you may see a hash value in the
class
property of DOM elements (e.g. a<div>
withvUugRG_container
). To override these, you can use the$=
CSS selector to match elements that end with a specified value. In this case, it should bediv[class$=container]
.
π Open standard connectors with better config interface
Logto now supports standard protocols (SAML, OIDC, and OAuth 2.0) for creating social connectors to integrate external identity providers. Each protocol can create multiple social connectors, giving you more control over your access needs.
Plus, we optimized the config interface for SAML connectors. Try it and let us know your feeling!
π New language
Added Russian translation. (credit @evist0)
π New Contributors
- @Alanimdeo made their first contribution in #3064
- @gadkins made their first contribution in #3032
- @evist0 made their first contribution in #3158
- @muratgozel made their first contribution in #3203
Thank you!
Full Changelog: v1.0.0-rc.1...v1.0.0-rc.3