Delicious Simplicity specializes in contemporary, elegant online assets – from websites to customer emails to applications. As a boutique consultancy, their customers look to them for bespoke, attentive, and beautiful products. But to deliver that, they require a backend stack that is as elegant and streamlined as their frontend designs.
With Stytch, Delicious Simplicity can now offer signup and login experiences as sophisticated and streamlined as the rest of their services, all with minimal time and effort required of their valuable engineering team.
"Stytch got out of our way in all the ways we wanted it out of our way, and it had our back in all the places we wanted an auth provider to have our back. You can move mountains instead of being buried by your own auth solutions."
— Brian Webster, Co-Founder, Delicious Simplicity
Partnership highlights
- Backend-driven tech stack: Combining Stytch’s backend Node.js SDK with their in-house preferred T3 stack (tRPC, Prisma, Next.js), Delicious Simplicity’s auth build was fully typesafe, modular, and resulted in uncannily concise code.
- Fine-grained control: By working with Stytch’s backend SDK and API endpoints, Delicious Simplicity retained total code control over their auth events and integrations with other essential backend services like payment.
- User management and security: Taking advantage of Stytch's user management, Delicious Simplicity offloaded all of their users' PII data onto Stytch's secure services — alleviating their responsibility of having to worry about data leaks and security.
- Owning the UX: With Stytch's composability and flexibility, Delicious Simplicity fully customized the user experience with the signup and login experience without the limits of a drag-and-drop component.
Stytch products
Challenge
Delicious Simplicity clients come to them for high-touch, tailored, and ultra-contemporary websites and applications. When DS was in charge of the codebase, this was no problem. But with auth, it always required more wrestling and wrangling than they felt should be necessary.
“With widget or other ‘low-code’ auth providers, you could never get it where you really wanted it. Or if you did actually get it where you wanted it, you had to fight and wrestle with the service and put in a bunch of extra work.”
— Brian Webster, Co-Founder, Delicious Simplicity
This extra work also bled into extra backend infrastructure. For many of their B2C clients, they found themselves building custom features like event listeners and triggers to keep their backend user data in sync, which they hoped an integration with something as critical as an auth provider would not require. Sure, they could use webhooks (which is the standard suggestion for a lot of auth providers), but again, this risked hurting the user experience: webhooks sometimes fail, and in those cases it required Delicious Simplicity even more developer resourcing to build in failsafes and backups to prevent hiccups for their clients.
Rather than saving time and developer resourcing, these services cut into time the DS team wanted to be spending building their clients’ projects.
“We’re such a heavy storytelling type of agency, so auth is an indispensable part of the UI. But getting that right was always costly. It got so bad that at one point we thought ‘Maybe we just need to build auth ourselves.’ We knew that wouldn’t save us time or money either, but it was so frustrating not to be able to build it the way we needed.”
— Brian Webster, Co-Founder, Delicious Simplicity
Solution
After exploring a few of Stytch’s products and solutions, the Delicious Simplicity team’s eureka moment came when they found the Stytch Node.js SDK. By combining this backend SDK with some of the tools they already relied on to save time and money – T3, tRPC, Prisma – the Node SDK empowered them to build their backend flows in just a few lines of code, and then build the exact user experience they wanted without any compromises or hurdles.
Not only that, but Stytch also took care of the things that DS didn’t want to: simultaneous account and user creation? No problem. Stytch-side storage of personal identifiable information? Easy. Flexible metadata to store custom information for specific kinds of transactions or users? Done.
The best part? How intuitive and fast the Stytch SDK made the build.
“When we got our hands on the Node SDK, and realized it could implement right inside of our backend APIs, a lightbulb went off. We wrote one line of Stytch OTP logic and got a working flow going – without compromising a single thing on the UX/UI side. When the account was created, a new user got created. After having wrestled with other auth providers, this was a revelation.”
— Brian Webster, Co-Founder, Delicious Simplicity
Code highlights
Simulteanous account and user creation
if (loginOrCreateResponse.user_created) {
const stytchUserId = loginOrCreateResponse.user_id;
const { id: stripeCustomerId } = await stripe.customers.create({ email: input.email });
const dbUser = await ctx.prisma.user.create({
data: {
stytchUserId: stytchUserId,
stripeCustomerId,
},
select: {
id: true,
},
});
await ctx.stytch.users.update(stytchUserId, {
trusted_metadata: {
db_user_id: dbUser.id,
stripe_customer_id: stripeCustomerId,
},
});
}
“With other Auth solutions logging in and creating an account are divorced from what they actually mean for your application database and business logic. When an account is created, you have a rule that hits your webhook endpoint and then creates a user in our database. It’s an unnecessary failpoint. But in Stytch it can be paired. Seeing this was a moment of delight for me. You can combine the business logic at the same step of user creation.”
— Brian Webster, Co-Founder, Delicious Simplicity
Changing a login method
When a user needs to update their login method like a phone number or email, all DS needs are these twelve lines of code:
// add new email method to a user
await ctx.stytch.otps.email.send({
email: input.email,
user_id: ctx.session.user_id,
});
// verify new email and replace old email(s)
const authenticateResponse = await ctx.stytch.otps.authenticate({
code: input.code,
method_id: input.emailId,
});
await Promise.all(
authenticateResponse.user.emails
.filter((email) => email.email_id !== input.emailId)
.map((email) => ctx.stytch.users.deleteEmail(email.email_id)),
);
Authentication at the edge
Another bonus feature of Stytch’s code base is Delicious Simplicity’s ability to use it in middleware for certain routes they want to protect (account paths, certain subscribe paths, etc.) In these instances, the middleware at the edge accesses and authenticates the JWT with Stytch, without anything occurring client-side.
export const middleware = async (req: NextRequest) => {
const res = NextResponse.next();
const jwtToken = req.cookies.get('session_jwt')?.value;
if (!jwtToken) {
// Redirect to the login page if the user is not logged in
return NextResponse.redirect(new URL('/login', req.url));
}
// ensure JWT is still valid, otherwise destroy the session and go to login
try {
const stytch = loadStytch();
await stytch.sessions.authenticateJwt(jwtToken);
} catch (err) {
res.cookies.delete('session_jwt');
return NextResponse.redirect(new URL('/login', req.url), { headers: res.headers });
}
return res;
};
Results
- Delighted clients: By freeing up developer time, Stytch gives time back to Delicious Simplicity that they used to take their client’s site to the next level – resulting in innovative features and UI bonbons that continue to delight their readers.
- Risk reduction: Between Device Fingerprinting and Stytch-side storage of PII, Delicious Simplicity and their clients don’t have to worry about fraud.
- Uncompromised user experience: By leveraging Stytch’s backend Node.js SDK, Delicious Simplicity can build the exact user experience they wanted, no wrangling or wrangling required.
- Clean, maintainable, and future-proof code: With Stytch’s fine-grained control of auth, Delicious Simplicity’s codebase is built to last, can be easily updated, and a delight for engineering teams to work with.
"When we budgeted out our client project, we allotted the same amount of time we’d usually need based on our experience with previous auth solutions plus a little extra, since Stytch was a new service. But Stytch was so much faster than we estimated that we were able to take that time and put it back towards extra features that delighted our client. It really made a difference in our end-product."
— Brian Webster, Co-Founder, Delicious Simplicity
The bottom line
With the flexibility and efficiency of Stytch’s Node SDK, Delicious Simplicity can spin up custom auth flows for their clients without sacrificing time or sophistication. In fact, with the time they save on auth, they can devote even more time to setting the standard for what contemporary web experiences can look and feel like.
What can Stytch do for you?
Jump into our Docs to learn more about our auth solutions — or sign up for a free account to try them out for yourself. Have questions? Reach us via Slack, Stytch Forum , or email.