Weston Ruter

Payton Swick

Important note: This project was first started before the Gutenberg feature plugin was started. As such, the JS Widgets plugin should now be considered a prototype which may inform the way that widget blocks get implemented in Gutenberg. This plugin will no longer be actively developed.
Also could be known as Widget Customizer 2.0, Widgets 3.0, or Widgets Next Generation.
Warning: The APIs provided by this plugin are still in flux. If creating new widgets that extend the <code>WP_JS_Widget</code> class, please look at the changelog and ensure compatibility with your extended widgets before deploying.
This plugin implements:
<ul>
<li><a href="https://core.trac.wordpress.org/ticket/33507" rel="nofollow ugc">WP-CORE#33507</a>: Allow widget controls to be JS-driven.</li>
<li><a href="https://core.trac.wordpress.org/ticket/35574" rel="nofollow ugc">WP-CORE#35574</a>: Add REST API JSON schema information to WP_Widget.</li>
<li><a href="https://github.com/WP-API/WP-API/issues/19" rel="nofollow ugc">WP-API#19</a>: Add widget endpoints to the WP REST API.</li>
</ul>
Features:
<ul>
<li>Integrates with <a href="https://wordpress.org/plugins/shortcode-ui/" rel="ugc">Shortcake (Shortcode UI)</a> to allow all JS widgets to be made available as Post Elements in the editor.</li>
<li>Widget instance settings in the Customizer are exported from PHP as regular JSON without any PHP-serialized base64-encoded <code>encoded_serialized_instance</code> anywhere to be seen.</li>
<li>Previewing widget changes in the customizer is faster since the <code>update-widget</code> Ajax request can be eliminated since the JS control can directly manipulate the widget instance data.</li>
<li>Widgets control forms use JS content templates instead of PHP to render the markup for each control, reducing the weight of the customizer load, especially when there are a lot of widgets in use.</li>
<li>Widgets that extend <code>WP_JS_Widget</code> will editable from both the customizer and the widgets admin page using the same <code>Form</code> JS interface. This <code>Form</code> is also able to be embedded in other contexts, like on the frontend and as a Shortcake (Shortcode UI) form. See <a href="https://github.com/xwp/wp-js-widgets/issues/11" rel="nofollow ugc">#11</a>.</li>
<li>Widgets employ the JSON Schema from the REST API to define an instance with validation and sanitization of the instance properties, beyond also providing <code>validate</code> and <code>sanitize</code> methods that work on the instance array as a whole.</li>
<li>A widget instance can be blocked from being saved by returning a <code>WP_Error</code> from its <code>validate</code> or <code>sanitize</code> method. For example, the RSS widget will show an error message if the feed URL provided is invalid and the widget will block from saving until the URL is corrected.</li>
<li>Widgets are exposed under the <code>js-widgets/v1</code> namespace, for example to list all Recent Posts widgets via the <code>/js-widgets/v1/widgets/recent-posts</code> or to get the Text widget with the “ID” (number) of 6, <code>/js-widgets/v1/widgets/text/6</code>.</li>
<li>Customizer settings for widget instances (<code>widget_{id_base}[{number}]</code>) are directly mutated via JavaScript instead of needing to do an <code>update-widget</code> Admin Ajax roundtrip; this greatly speeds up previewing.</li>
<li>Widget control forms can be extended to employ any JS framework for managing the UI, allowing Backbone, React, or any other frontend technology to be used.</li>
<li>Compatible with widgets stored in a custom post type instead of options, via the Widget Posts module in the <a href="https://github.com/xwp/wp-customize-widgets-plus" rel="nofollow ugc">Customize Widgets Plus</a> plugin.</li>
<li>Compatible with <a href="https://github.com/xwp/wp-customize-snapshots" rel="nofollow ugc">Customize Snapshots</a>, allowing changes made in the Customizer to be applied to requests for widgets via the REST API.</li>
<li>Includes adaptations of all core widgets using the new <code>WP_JS_Widget</code> API.</li>
<li>The adapted core widgets include additional raw data in their REST API item responses so that JS can render them client-side.</li>
<li>The Notifications API is utilized to display warnings when a user attempts to provide markup in a core widget title or illegal HTML in a Text widget’s content.</li>
<li>The Pages widget in Core is enhanced to make use of <a href="https://wordpress.org/plugins/customize-object-selector/" rel="ugc">Customize Object Selector</a> if available to display a Select2 UI for selecting pages to exclude instead of providing page IDs.</li>
<li>An bonus bundled plugin provides a “Post Collection” widget which, if the <a href="https://wordpress.org/plugins/customize-object-selector/" rel="ugc">Customize Object Selector</a> plugin is installed, will provide a UI for curating an arbitrary list of posts to display.</li>
</ul>
This plugin doesn’t yet implement any widgets that use JS templating for frontend rendering of the widgets. For that, please see the <a href="https://github.com/xwp/wp-next-recent-posts-widget" rel="nofollow ugc">Next Recent Posts Widget</a> plugin.
Limitations/Caveats:
<ul>
<li>Only widgets that extend <code>WP_JS_Widget</code> will be exposed via the REST API. The plugin includes a <code>WP_JS_Widget</code> adapter class which demonstrates how to adapt existing <code>WP_Widget</code> classes for the new widget functionality.</li>
</ul>

JS Widgets

A prototype of next generation of widgets in core, embracing JS for UI and powering the Widgets REST API.

tmeister

This plugin seamlessly extends the WP REST API, enabling robust and secure authentication using JSON Web Tokens (JWT). It provides a straightforward way to authenticate users via the REST API, returning a standard JWT upon successful login.
<h3>Key features of this free version include:</h3>
<ul>
<li>Standard JWT Authentication: Implements the industry-standard <a href="https://tools.ietf.org/html/rfc7519" rel="nofollow ugc">RFC 7519</a> for secure claims representation.</li>
<li>Simple Endpoints: Offers clear <code>/token</code> and <code>/token/validate</code> endpoints for generating and validating tokens.</li>
<li>Configurable Secret Key: Define your unique secret key via <code>wp-config.php</code> for secure token signing.</li>
<li>Optional CORS Support: Easily enable Cross-Origin Resource Sharing support via a <code>wp-config.php</code> constant.</li>
<li>Developer Hooks: Provides filters (<code>jwt_auth_expire</code>, <code>jwt_auth_token_before_sign</code>, etc.) for customizing token behavior.</li>
</ul>
JSON Web Tokens are an open, industry standard method for representing claims securely between two parties.
For users requiring more advanced capabilities such as multiple signing algorithms (RS256, ES256), token refresh/revocation, UI-based configuration, or priority support, consider checking out <a href="https://jwtauth.pro/?utm_source=wp_plugin_readme&utm_medium=link&utm_campaign=pro_promotion&utm_content=description_link_soft" rel="nofollow ugc">JWT Authentication PRO</a>.
Support and Requests: Please use <a href="https://github.com/Tmeister/wp-api-jwt-auth/issues" rel="nofollow ugc">GitHub Issues</a>. For priority support, consider upgrading to <a href="https://jwtauth.pro/?utm_source=wp_plugin_readme&utm_medium=link&utm_campaign=pro_promotion&utm_content=description_support_link" rel="nofollow ugc">PRO</a>.
<h3>REQUIREMENTS</h3>
<h4>WP REST API V2</h4>
This plugin was conceived to extend the <a href="https://github.com/WP-API/WP-API" rel="nofollow ugc">WP REST API V2</a> plugin features and, of course, was built on top of it.
So, to use the wp-api-jwt-auth you need to install and activate <a href="https://github.com/WP-API/WP-API" rel="nofollow ugc">WP REST API</a>.
<h3>PHP</h3>
Minimum PHP version: 7.4.0
<h3>PHP HTTP Authorization Header Enable</h3>
Most shared hosting providers have disabled the HTTP Authorization Header by default.
To enable this option you’ll need to edit your .htaccess file by adding the following:
<pre><code>RewriteEngine on
RewriteCond %{HTTP:Authorization} ^(.*)
RewriteRule ^(.*) - [E=HTTP_AUTHORIZATION:%1]
</code></pre>
<h4>WPENGINE</h4>
For WPEngine hosting, you’ll need to edit your .htaccess file by adding the following:
<pre><code>SetEnvIf Authorization "(.*)" HTTP_AUTHORIZATION=$1
</code></pre>
See https://github.com/Tmeister/wp-api-jwt-auth/issues/1 for more details.
<h3>CONFIGURATION</h3>
<h3>Configure the Secret Key</h3>
The JWT needs a secret key to sign the token. This secret key must be unique and never revealed.
To add the secret key, edit your wp-config.php file and add a new constant called JWT_AUTH_SECRET_KEY:
<pre><code>define('JWT_AUTH_SECRET_KEY', 'your-top-secret-key');
</code></pre>
You can generate a secure key from: https://api.wordpress.org/secret-key/1.1/salt/
Looking for easier configuration? <a href="https://jwtauth.pro/?utm_source=wp_plugin_readme&utm_medium=link&utm_campaign=pro_promotion&utm_content=config_secret_key_link" rel="nofollow ugc">JWT Authentication PRO</a> allows you to manage all settings through a simple admin UI.
<h3>Configure CORS Support</h3>
The wp-api-jwt-auth plugin has the option to activate <a href="https://en.wikipedia.org/wiki/Cross-origin_resource_sharing" rel="nofollow ugc">CORS</a> support.
To enable CORS Support, edit your wp-config.php file and add a new constant called JWT_AUTH_CORS_ENABLE:
<pre><code>define('JWT_AUTH_CORS_ENABLE', true);
</code></pre>
Finally, activate the plugin within your wp-admin.
<h3>Namespace and Endpoints</h3>
When the plugin is activated, a new namespace is added:
<pre><code>/jwt-auth/v1
</code></pre>
Also, two new endpoints are added to this namespace:
Endpoint | HTTP Verb 
/wp-json/jwt-auth/v1/token | POST 
/wp-json/jwt-auth/v1/token/validate | POST
Need more functionality? <a href="https://jwtauth.pro/?utm_source=wp_plugin_readme&utm_medium=link&utm_campaign=pro_promotion&utm_content=endpoints_pro_note" rel="nofollow ugc">JWT Authentication PRO</a> includes additional endpoints for token refresh and revocation.
<h3>USAGE</h3>
<h4>/wp-json/jwt-auth/v1/token</h4>
This is the entry point for JWT Authentication.
It validates the user credentials, username and password, and returns a token to use in future requests to the API if the authentication is correct, or an error if authentication fails.
Sample Request Using AngularJS
<pre><code>(function() {
 var app = angular.module('jwtAuth', []);

 app.controller('MainController', function($scope, $http) {
 var apiHost = 'http://yourdomain.com/wp-json';

 $http.post(apiHost + '/jwt-auth/v1/token', {
 username: 'admin',
 password: 'password'
 })
 .then(function(response) {
 console.log(response.data)
 })
 .catch(function(error) {
 console.error('Error', error.data[0]);
 });
 });
})();
</code></pre>
Success Response From The Server
<pre><code>{
 "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC9qd3QuZGV2IiwiaWF0IjoxNDM4NTcxMDUwLCJuYmYiOjE0Mzg1NzEwNTAsImV4cCI6MTQzOTE3NTg1MCwiZGF0YSI6eyJ1c2VyIjp7ImlkIjoiMSJ9fX0.YNe6AyWW4B7ZwfFE5wJ0O6qQ8QFcYizimDmBy6hCH_8",
 "user_display_name": "admin",
 "user_email": "admin@localhost.dev",
 "user_nicename": "admin"
}
</code></pre>
Error Response From The Server
<pre><code>{
 "code": "jwt_auth_failed",
 "data": {
 "status": 403
 },
 "message": "Invalid Credentials."
}
</code></pre>
Once you get the token, you must store it somewhere in your application, e.g., in a cookie or using localStorage.
From this point, you should pass this token with every API call.
Sample Call Using The Authorization Header With AngularJS
<pre><code>app.config(function($httpProvider) {
 $httpProvider.interceptors.push(['$q', '$location', '$cookies', function($q, $location, $cookies) {
 return {
 'request': function(config) {
 config.headers = config.headers || {};
 // Assume that you store the token in a cookie
 var globals = $cookies.getObject('globals') || {};
 // If the cookie has the CurrentUser and the token
 // add the Authorization header in each request
 if (globals.currentUser && globals.currentUser.token) {
 config.headers.Authorization = 'Bearer ' + globals.currentUser.token;
 }
 return config;
 }
 };
 }]);
});
</code></pre>
The wp-api-jwt-auth plugin will intercept every call to the server and will look for the Authorization Header. If the Authorization header is present, it will try to decode the token and will set the user according to the data stored in it.
If the token is valid, the API call flow will continue as normal.
Sample Headers
<pre><code>POST /resource HTTP/1.1
Host: server.example.com
Authorization: Bearer mF_s9.B5f-4.1JqM
</code></pre>
<h3>ERRORS</h3>
If the token is invalid, an error will be returned. Here are some sample errors:
Invalid Credentials
<pre><code>[
 {
 "code": "jwt_auth_failed",
 "message": "Invalid Credentials.",
 "data": {
 "status": 403
 }
 }
]
</code></pre>
Invalid Signature
<pre><code>[
 {
 "code": "jwt_auth_invalid_token",
 "message": "Signature verification failed",
 "data": {
 "status": 403
 }
 }
]
</code></pre>
Expired Token
<pre><code>[
 {
 "code": "jwt_auth_invalid_token",
 "message": "Expired token",
 "data": {
 "status": 403
 }
 }
]
</code></pre>
Need advanced error tracking? <a href="https://jwtauth.pro/?utm_source=wp_plugin_readme&utm_medium=link&utm_campaign=pro_promotion&utm_content=errors_pro_note" rel="nofollow ugc">JWT Authentication PRO</a> offers enhanced error tracking and monitoring capabilities.
<h4>/wp-json/jwt-auth/v1/token/validate</h4>
This is a simple helper endpoint to validate a token. You only need to make a POST request with the Authorization header.
Valid Token Response
<pre><code>{
 "code": "jwt_auth_valid_token",
 "data": {
 "status": 200
 }
}
</code></pre>
<h3>AVAILABLE HOOKS</h3>
The wp-api-jwt-auth plugin is developer-friendly and provides five filters to override the default settings.
<h4>jwt_auth_cors_allow_headers</h4>
The jwt_auth_cors_allow_headers filter allows you to modify the available headers when CORS support is enabled.
Default Value:
<pre><code>'Access-Control-Allow-Headers, Content-Type, Authorization'
</code></pre>
<h4>jwt_auth_not_before</h4>
The jwt_auth_not_before filter allows you to change the <a href="https://tools.ietf.org/html/rfc7519#section-4.1.5" rel="nofollow ugc">nbf</a> value before the token is created.
Default Value:
<pre><code>Creation time - time()
</code></pre>
<h4>jwt_auth_expire</h4>
The jwt_auth_expire filter allows you to change the <a href="https://tools.ietf.org/html/rfc7519#section-4.1.4" rel="nofollow ugc">exp</a> value before the token is created.
Default Value:
<pre><code>time() + (DAY_IN_SECONDS * 7)
</code></pre>
<h4>jwt_auth_token_before_sign</h4>
The jwt_auth_token_before_sign filter allows you to modify all token data before it is encoded and signed.
Default Value:
<pre><code>$token = array(
 'iss' => get_bloginfo('url'),
 'iat' => $issuedAt,
 'nbf' => $notBefore,
 'exp' => $expire,
 'data' => array(
 'user' => array(
 'id' => $user->data->ID,
 )
 )
);
</code></pre>
Want easier customization? <a href="https://jwtauth.pro/?utm_source=wp_plugin_readme&utm_medium=link&utm_campaign=pro_promotion&utm_content=hook_payload_pro_note" rel="nofollow ugc">JWT Authentication PRO</a> allows you to add custom claims directly through the admin UI.
<h4>jwt_auth_token_before_dispatch</h4>
The jwt_auth_token_before_dispatch filter allows you to modify the response array before it is sent to the client.
Default Value:
<pre><code>$data = array(
 'token' => $token,
 'user_email' => $user->data->user_email,
 'user_nicename' => $user->data->user_nicename,
 'user_display_name' => $user->data->display_name,
);
</code></pre>
<h4>jwt_auth_algorithm</h4>
The jwt_auth_algorithm filter allows you to modify the signing algorithm.
Default value:
<pre><code>$token = JWT::encode(
 apply_filters('jwt_auth_token_before_sign', $token, $user),
 $secret_key,
 apply_filters('jwt_auth_algorithm', 'HS256')
);

// ...

$token = JWT::decode(
 $token,
 new Key($secret_key, apply_filters('jwt_auth_algorithm', 'HS256'))
);
</code></pre>
<h3>JWT Authentication PRO</h3>
Elevate your WordPress security and integration capabilities with JWT Authentication PRO. Building upon the solid foundation of the free version, the PRO version offers advanced features, enhanced security options, and a streamlined user experience:
<ul>
<li>Easy Configuration UI: Manage all settings directly from the WordPress admin area.</li>
<li>Token Refresh Endpoint: Allow users to refresh expired tokens seamlessly without requiring re-login.</li>
<li>Token Revocation Endpoint: Immediately invalidate specific tokens for enhanced security control.</li>
<li>Customizable Token Payload: Add custom claims to your JWT payload to suit your specific application needs.</li>
<li>Granular CORS Control: Define allowed origins and headers with more precision directly in the settings.</li>
<li>Rate Limiting: Protect your endpoints from abuse with configurable rate limits.</li>
<li>Audit Logs: Keep track of token generation, validation, and errors.</li>
<li>Priority Support: Get faster, dedicated support directly from the developer.</li>
</ul>
<a href="https://jwtauth.pro/?utm_source=wp_plugin_readme&utm_medium=link&utm_campaign=pro_promotion&utm_content=pro_section_cta" rel="nofollow ugc">Upgrade to JWT Authentication PRO Today!</a>
<h3>Free vs. PRO Comparison</h3>
Here’s a quick look at the key differences:
<ul>
<li>Basic JWT Authentication: Included (Free), Included (PRO)</li>
<li>Token Generation: Included (Free), Included (PRO)</li>
<li>Token Validation: Included (Free), Included (PRO)</li>
<li>Token Refresh Mechanism: Not Included (Free), Included (PRO)</li>
<li>Token Revocation: Not Included (Free), Included (PRO)</li>
<li>Token Management Dashboard: Not Included (Free), Included (PRO)</li>
<li>Analytics & Monitoring: Not Included (Free), Included (PRO)</li>
<li>Geo-IP Identification: Not Included (Free), Included (PRO)</li>
<li>Rate Limiting: Not Included (Free), Included (PRO)</li>
<li>Detailed Documentation: Basic (Free), Comprehensive (PRO)</li>
<li>Developer Tools: Not Included (Free), Included (PRO)</li>
<li>Premium Support: Community via GitHub (Free), Priority Direct Support (PRO)</li>
</ul>

JWT Authentication for WP REST API

I was confused about choosing the jwt plugin. There are 3 versions, the first has not been updated for 6 months and the second has not been updated for two months, the first has not worked, the second has unclear instructions and has some defects despite the presence of a dashboard, and this add-on has not been updated for two years  But when I saw that it was updated a day ago, I decided to use it and all the problems that I was facing were resolved. I ask the add-on developers to update them every period, but there is something unclear, how can I amend the token expiry time?  Thanks

good


It breaks APIs that don't require authorization.



Such as WordPress's posts endpoint and WooCommerce's endpoint.


It breaks APIs that don't require authorization


Perfect! This plugin is very easy to install and use. It's also easy to extend and add your own return data.


Easy to use and extend


I've been using the plugin for over year, it's very good and user friendly!



At some point there was a constant message to upgrade, but that was fixed.


Great plugin!

Extends the WP REST API using JSON Web Tokens Authentication as an authentication method.

JS Widgets vs JWT Authentication for WP REST API