A few weeks ago, the team I work on, AWS Amplify, launched brand new authentication components for React, Vue, and Angular. I want to give you a quick tour of what you can do with these components from enabling backend authentication to simple frontend flows, to more complex, customized setups. Enable Authentication You can enable authentication via Amplify in two ways: first through Amplify Studio and secondly through the Amplify CLI. I'll show you how to do so through Studio; however, here are instructions for doing so through the command line if that better fits your workflows. First ..read more

What is Amplify Studio? One of the most exciting projects I've worked on in my career, AWS Amplify Studio, just launched at Re:Invent in public preview. With Amplify Studio you can quickly go from a designer’s vision to a full stack, cloud connected app that scales with your needs. You can create components in Figma, import them into Amplify Studio, and then connect them to your AWS-backed data models. Then, Studio can export your UI components to human-readable React code that you can extend yourself. Let's go step by step through how you would build an app with Amplify Studio. Create a Data ..read more

AWS Amplify recently added support for Next.js 10 features, including incremental static regeneration, optional catch all routes, and image optimization. In this post, we'll dig into what each of these features is, how to implement a fullstack app using them, and how to deploy them to AWS! Let's dive in. Please note that I work as a Developer Advocate on the AWS Amplify team, if you have any feedback or questions about it, please reach out to me or ask on our Discord - discord.gg/amplify! If you're new to Next.js, check out this tutorial first to get you started! I also wrote this tutorial on ..read more

Frontend developers! Have you ever wondered why to choose a certain type of database for a project, how to create an API, how to deploy to AWS, or what a container is? You're in the right place! This series will teach you all about backend development specifically targeted at frontend developers: you know how to code, you may have heard certain backend terminology, but you don't consider yourself fullstack. You'll learn backend concepts and how to implement them using AWS. In this first post of the series, we'll start off by defining what the backend is, what difficulties there are within back ..read more

AWS Amplify added support for implementing Sign in with Apple to your apps! In this tutorial we'll start from zero by creating an Apple Developer account, then enable Sign in with Apple using the Amplify Admin UI, finally we'll add it to a React app! Create an Apple Developer account - note that this costs $99 and takes up to 48 hours! You also may need to create a development certificate in your account. Go to the AWS Amplify Console and create a new backend app. Choose a name for your project, and then open up the Admin UI once your project is initialized. Click "Enable authentication ..read more

I first used GraphQL on a project right after its launch in 2015, and to be honest I didn't understand why we were using it. Over the years, I've grown to love GraphQL - you can quickly create APIs with managed services such as AWS AppSync and Hasura, and it lessens the friction between frontend and backend development. In this post, we'll chat about what GraphQL is, why to use it as well as when it may not be the best option, and then create a full recipe app using a GraphQL API. Please note that I work as a Developer Advocate on the AWS Amplify team, if you have any feedback or questions ab ..read more

Next.js is one of my favorite tools for web development -- but it's a frontend framework. How can you build a fullstack application with it? In this tutorial, we'll build a Server-side Rendered Next.js app with a database-backed backend, static image storage, and authentication. It'll be National Park themed -- signed in users will be able to create new parks, and everyone will be able to view all added parks. If you're new to Next.js, I wrote a tutorial on how to get started with it. If you're new to AWS Amplify, here's a tutorial on that as well! Create your app Backend First, create a new N ..read more

In this tutorial, we'll be building out a site that uses Stripe to create a checkout system, then that triggers an AWS Lambda Function provisioned through AWS Amplify which creates a user for the purchaser. Then, the user can log in and see paywalled content! This pattern would work for a membership or course site where you want a user to pay for access to content. You could slightly modify the code to send digital products to customers via email as well! This tutorial assumes intermediate React, AWS Amplify, and Node.js knowledge, though you could use the Node.js code with any frontend stack ..read more

In this tutorial, we'll be talking about authorization and how to implement it with AWS Amplify's DataStore. First, let's get on the same page with what authorization and authentication are: Authorization - Different users have different actions that they can perform. Authentication - making sure someone is who they say they are, for example through making them enter a password. This tutorial will be bypassing teaching React and AWS Amplify - check out this React tutorial and this Amplify Admin UI tutorial if you're new to either. You'll also need to know React Router. I created a repo with s ..read more

Acronyms are always fun -- they're helpful for reducing the effort of saying out a full long-winded technical term, but they can also look like alphabet soup and be really confusing to newbies! I want to use this post to explain two terms that are often seen in tandem and start with the same two letters, but are pretty different concepts. Static Site Generation (SSG) and Server-Side Rendering (SSR) are both (back to being) hot topics in web development, but what are they? And why are they so widely talked about? SSG Static-site generators enable developers to create many pages all at once usin ..read more