Announcing Reshuffle Identity

Nearly every modern application needs to manage user identity and authentication. Thats why its a bit shocking that even in 2019, integrating identity and authentication is still such a painful experience. As you might have guessed, we write quite a few web apps at Reshuffle so this pain is also our pain.

With this motivation in mind, were incredibly excited to announce our latest and greatest addition: Reshuffle Identity. Reshuffle Identity removes the traditional overhead and stress associated with user management and authentication. Signup users and protect sensitive content without ever needing to write a login flow.

Reshuffle Identity currently supports GitHub and Google SSO with more providers and username/password based login coming soon!

All Reshuffle apps can use Identity out of the box, just by adding a few lines of code to their frontend and backend. A simple example is shown below:

Add Reshuffle auth middleware to the backend/_handler of your app:

import express from 'express';import { defaultHandler } from '@reshuffle/server-function';import { authHandler } from '@reshuffle/passport';const app = express();app.use(authHandler);app.use(defaultHandler);export default app;

The middleware adds /login and /logout and /whoami endpoints to your app which work during both local and remote development. Once the authRouter is added to your app, you can define express endpoints or decorated functions to handle incoming authenticated data. Learn more about this in the Identity docs.

Now that our backend has the necessary middleware, we can utilize the authentication in our frontend. This can be done manually, but is demonstrated below using our official @reshuffle/react-auth package.

First we need to wrap our highest level component in an AuthProvider:

// src/index.js

import React from 'react';import ReactDOM from 'react-dom';import { AuthProvider } from '@reshuffle/react-auth';import App from './App';ReactDOM.render((  <AuthProvider>    <App />  </AuthProvider>), document.getElementById('root'));

With the AuthProvider in place, we can now utilize the useAuth hook to retrieve stateful variables that inform us about the current auth state of our application.

// src/App.js

import '@reshuffle/code-transform/macro';import React from 'react';import { useAuth } from '@reshuffle/react-auth';export default function App() {  const { loading, error, authenticated, profile, getLoginURL } = useAuth();  if (loading) return <div><h2>Loading...</h2></div>;  if (error) return <div><h1>{error.toString()}</h1></div>;  return (      <div>      {        authenticated ? (<span>{profile.displayName}</span>) : (          <a href={getLoginURL()}>Login</a>        )      }      </div>  );}

And just like that, you can add secure and fully-functional identity/user management to your existing or new app in minutes. Never again will you need to spend hours traversing OAuth configuration UIs or worrying about the security implications of dialogs you click. Reshuffle Identity solves the undifferentiated auth problems so you can spend all of your time focused on the value your app delivers.

More about Reshuffle Identity:

Reshuffle Identity docs
Reshuffle Identity starter template
Reshuffle blog template with Identity
Reshuffle material-ui/Identity template
Reshuffle Todo app with Identity

We are so excited to see what everyone ends up building with Reshuffle Identity. As always, we love feedback. Please join us on Discord so you can tell us what you found great (and not so great) about this newest addition to Reshuffle.