Kickstart React, Nextjs, SvelteKit, SolidStart Auth setup with Unify Idp

React is a popular JavaScript library for building user interfaces, and one common feature in many applications is user authentication. Authentication is the process of verifying a user's identity before granting access to restricted content or features. Implementing authentication in a React application can be a complex task, but with the help of an authentication API, developers can simplify the process and focus on building other core features of their application.

An authentication API is a backend service that provides endpoints for user authentication, user registration, and user management. These endpoints can be called by a React frontend to handle user authentication and authorization. By separating authentication logic into a dedicated backend service, developers can ensure that authentication is handled securely and consistently across their application.

In this article, we will explore how to implement authentication in a React application using an authentication API. We will cover the basics of authentication, how to integrate an authentication API with a React frontend, and best practices for handling authentication securely.

To kickstart your setup you might want to have a look at:
NextAuth.js is a serverless authentication library for Next.js applications that supports a wide range of authentication providers. (https://next-auth.js.org/)

Auth.js is a modern authentication and authorization library for Node.js that supports various identity providers and security protocols. (Next.js SvelteKit SolidStart) (https://authjs.dev/)

Example code:

export default function Unify(tenant, options) {
  return {
    id: 'unify',
    name: 'Unify',
    type: 'oauth',
    token: tenant + '/token',
    userinfo: tenant + '/api/1.0/me',
    authorization: {
      url: tenant + '/authorize',
      params: {
        scope: '',
      },
    },
    checks: ['state', 'pkce'],
    profile(profile) {
      return {
        ...profile.data,
      }
    },
    options,
  }
}

UnifyProvider('https://sub.getunify.dev', {
   clientId: 'XXX',
   clientSecret: 'XXX',
})