stencil
Passport
Our great sponsors
stencil | Passport | |
---|---|---|
55 | 63 | |
12,280 | 22,388 | |
0.7% | - | |
9.9 | 5.1 | |
2 days ago | 2 months ago | |
TypeScript | JavaScript | |
GNU General Public License v3.0 or later | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
stencil
- Ajout de l'auto-complétion sur les Web Components avec Stencil
-
Making Web Component properties behave closer to the platform
First a disclosure: I never actually used Stencil, only played with it a bit locally in a hello-world project while writing this post.
-
Plasmic.app – the visual builder for your tech stack
This is my main concern too.
I don't understand why tools like this "pick a winner" with a specific framework instead of rendering to Web Components with a framework wrapper, or using something like Stencil[1] that can render to any framework.
-
Design Systems with Web Components
I was recently able to sit down with some of the core members of Ionic, who also created Stencil a toolchain for building Design Systems and Progressive Web Apps. We talked at great length how typically companies are approaching Ionic from a Design Team and need help building components. As a developer I wanted to talk about the Web Components that are used within the Design System first. There was a decent amount of surprise, so I thought I would break down what a Design System is and why it doesn't matter which end you start with, as long as you have both your Design and Development teams working together to build your Design System.
- Nue: A React/Vue/Vite/Astro Alternative
-
If Web Components are so great, why am I not using them?
Examples like this bug me. The React example is using a high level abstraction, the web component is directly using the API. A more accurate example would show how those React calls eventually boil down to document.createElement()
I don’t think the Web Components API was meant to be used directly all the time. You can use a framework like StencilJS:
- Use Stencil / the ionic framework with emberjs [video]
-
World Wide Web Wars
You might say that this is the same vicious cycle as JavaScript frameworks. That's wrong, because Web Components are interoperable by design. Choosing Stencil or Lit or any other library is a development convenience that has little to do with the interoperability of the resulting components.
-
Is there a plugin that abstracts registering web components with React?
I guess my problem is more specific to my overall architecture. I have components that when are placed in the DOM, have props rendered on them by their parent elements. I'm using stencil to do this.
-
The benefits of Web Component Libraries
Web component browser APIs aren't that many, and not that hard to grasp (if you don't know about them, have a look at Google's Learn HTML section and MDN's Web Components guide); but creating a web component actually requires taking care of many small things. This is where web component libraries come in very handy, freeing us of having to think about some of those things by taking care of them for us. Most of the things I'll mention here are handled one way of another by other libraries (GitHub's Catalyst, Haunted, Hybrids, Salesforce's LWC, Slim.JS, Ionic's Stencil) but I'll focus on Google's Lit and Microsoft's FAST here as they probably are the most used web component libraries out there (ok, I lied, Lit definitely is, FAST not that much, far behind Lit and Stencil; but Lit and FAST have many things in common, starting with the fact that they are just native web components, contrary to Stencil that compiles to a web component). Both Lit and FAST leverage TypeScript decorators to simplify the code even further so I'll use that in examples, even though they can also be used in pure JS (decorators are coming to JS soon BTW). I'll also leave the most apparent yet most complex aspect for the end.
Passport
-
Non-technical person looking for your help
Next, use something like https://www.npmjs.com/package/passport, this is authentication middleware, and it works similarly for different authentication providers. Carefully read the documentation. OAuth is complicated, but that's because it solves a complicated problem
-
Exploring the Most Commonly Used Folder Names in Popular NPM Packages
lib: The lib folder, short for "library", is mostly used to store the actual source code of the package, but it can also be used to store third-party code, utilities and helpers. Example from passport.
-
Instagram Graph API Explained: How to log in users
passport for authentication
-
Auth.js Authentication for the Web
I went down the rabbithole of using next-auth (now authjs) for a recent project. Having used Passport.js [1] for Oauth2 the last time I was doing node.js ~3 years ago, I found this library to have many footguns as comments/answers on SO and Github.
Seems like many people are trying to shoehorn their codebase [2] (!!) to make it work with the way the library manages sign-in flow, redirects, cookies, logout, etc. [3]
These were solved problems in the MEAN stack era with middlewares, but now that Next.js/react is the trend, people are doing everything they can to make it work - from relaxing security configs, to stashing things in the JWT just so some callback can get an additional piece of data.
- I'm having error saying that req.isAuthenticated() not a function
-
NodeJS + Postgres DB + Passport JWT + Passport Local Login and Authentication
Here I am writing my first blog 😇 about how do we connect a simple [NodeJS Application] 😎(https://www.npmjs.com/package/express) to Postgres and use PassportJS for authentication and authorization.
-
Spotify OAuth2 Authentication in a NestJS Application
As there is no official documentation for integrating this type of authentication with NestJS and development articles usually focus on Google and Facebook integration, this article presents an alternative to integrate the Spotify Authorization Code Flow with NestJS using the Passport authentication middleware along with the passport-spotify strategy.
-
Keycloak Express openid-client
We are going to use this openid-client and passport to connect to keycloak. I install the following
-
Secure API-Auth based on Express - References
You can use passportjs
-
How to sign out user after a period of time
I use PassportJS to manage authentication strategies and express-session with connect-redis to manage user sessions. What this means is that when a user logs in, their session is created on redis and has an identifier assigned to it which is stored in a an http only cookie on the user s browser with 2w expiry time. If they login again, I extend the expiration date (possible using express-session)
What are some alternatives?
lit - Lit is a simple library for building fast, lightweight web components.
Keycloak - Open Source Identity and Access Management For Modern Applications and Services
Svelte - Cybernetically enhanced web apps
everyauth - node.js auth package (password, facebook, & more) for Connect and Express apps
Grant - OAuth Proxy
Prisma - Next-generation ORM for Node.js & TypeScript | PostgreSQL, MySQL, MariaDB, SQL Server, SQLite, MongoDB and CockroachDB
supabase - The open source Firebase alternative.
vite-ssg - Static site generation for Vue 3 on Vite
passwordless - node.js/express module to authenticate users without password
css-modules - Documentation about css-modules
Lockit - Authentication solution for Express
catalyst - Catalyst is a set of patterns and techniques for developing components within a complex application.