Troubleshooting Guide:
Most nations will migrate to a new, modern authentication system in the last quarter of 2024. Some of the changes rolled out in this migration will require your team to make changes to website pages where supporters leave comments or suggestion box and user-submitted blog post pages. No other changes should be required and this will only affect a small percentage of users.
Below are some examples of before and after a nation has been migrated to the new authentication system so you can become familiar with the changes.
Log in to leave to comments (Blog pages, Action pages)
BEFORE migration to our new authentication system, your page may have looked like this:
Options to sign in with Facebook (no longer supported)
Option to sign in with Twitter (no longer supported)
Space to sign in with email and password
AFTER migration to our new authentication system your page may look like this:
Facebook and Twitter options are gone (in most cases, please check your website)
The password field is missing. The user will now enter their email address and be taken through the new authentication system before returning to the site to leave a comment.
Comments - Issues to look for after migration
There may be some language reading “Sign in with” (see image above for an example) this language is left over from when it was possible to log into NationBuilder with Twitter and Facebook. Continue to read to find out where to find and makes changes necessary.
Suggestion Box Page
The Suggestion Box sign-in screen will see the same changes as the comments. Here is an example of a Suggestion Box page after migration that still shows “Sign in with.”
In this case, two things need to be removed by your team:
Blue button that says “Twitter” (no longer supported for logging into NationBuilder)
Text “Sign in with” (no longer needed)
What to do
These sign-in options are found in the _user_session_form.html template in your custom theme. In your Control Panel, go to your website and click on Theme. Under the Templates section, look for the “User login form” file named _user_session_form.html You’ll be removing the following types of items from this template:
Password field
Social media login links (Facebook, Twitter, any references to oauth_login_links)
Remember me checkbox (no longer needed)
Optional: You can replace the email address field/the entire login form with a link or button that points to /login.
Example
The following block of code contains the password field (look for {% password_field "password", class:"form-control" %}). This entire code block can be removed.
<div class="form-group">
<div class="float-label">
<label for="user_session_password">{{ t_forms_password }}</label>
{% password_field "password", class:"form-control" %}
</div>
</div>
The following block of code contains the social media login links (look for {% include "oauth_login_links" %}). This entire code block can be removed.
<div class="form-group">
{% include "oauth_login_links" %}
</div>
Other template files to update in your custom theme
Remove the password fields from account activation pages (user_activations_new.html)
Correct or remove headings that say “Sign in with”
Replace “Sign in with email” references with “Sign in” links to /login
Optional: Add a “Login and security settings” link to the menu in signups_edit.html template following the instructions below
Look for and remove the password_field liquid variable as well as oauth_login_links, request.facebook_connect_url, request.twitter_connect_url across the theme template files such as the following (please also make sure to inspect _wide versions of the files):
_columns_2
_footer
_header
_homepage_exerpt_recruiting
_nav
_preheader_email_signup
_sidebar
_signup_form
_supporter_nav
_user_session_form
layout
layout_protected
pages_show_activity_stream
pages_show_directory
pages_show_followers
pages_show_follows
pages_show_political_capital
pages_show_recruiting
splash
user_accounts_new
user_activations_new
User_sessions_new
Login and security settings page link update instructions
Supporters who register an account now have a page in the supporter portal to manage their login and security settings for things like multi-factor authentication (if participating in the beta test), resetting their password, and other settings to come.
If you want this link to appear on the existing Account Settings page found at /forms/signups/:id/edit, then edit the signups_edit.html file for your custom theme
Add this link to the page where it makes sense for the page layout and style of your theme: <a href="/supporter_portal/security">Login and security settings</a>
If you have translated your website, this is an opportunity to translate the link to the language of your website.
Be sure to add any other attributes needed for your theme for links on this page, e.g. classes, ids, ARIA attributes, or any other needed attributes.
If you want this link to appear on a different page for the authenticated supporter, add the link to the page template of your choice after the conditional check for the authenticated supporter
If you do this, then you must edit signups_edit.html from the first step to add data-skip-injecting-link="true" to any element in the layout. This will prevent our automatic injection of the link onto the page.
Example:
If you have a custom theme based on the Raise stock theme. You will see that we have automatically added the link to the bottom of the settings form:
However, it would be better to have the link added to the sidebar navigation. After editing the page template and adding the link, the link is no longer automatically injected, and it now appears in the location that is preferred for the custom theme based on Raise:
You can also customize it as you wish, such as specifying that the link open in a new tab, as in this example:
Suppose you want to include the link to the Login and security page to a basic page content and a custom template for it that might be routed to /account. However, you still need to edit the signups_edit.html file to add the data attribute data-skip-injecting-link="true" to any element so that our code knows not to inject a link onto the Account Settings page automatically. For example:
If you need help please, please contact our support team.