Setting up Amplify

Now that you have your blog set up to support a dashboard, you need to set up Amplify so that you can do things like adding authentication and creating an API. To do this you need to first install the Amplify CLI.

npm i -g @aws-amplify/cli # OR yarn global add @aws-amplify/cli

Once the CLI is installed you need to initialize Amplify in your Gatsby blog project. From the root of the project run amplify init .

One of two things will happen when you run this command. If you have some AWS user profiles on your computer it will ask if you want to use a profile. (If you have a profile with administrative and programmatic privileges feel free to choose that.) If you don’t have any user profiles created already, or you’re unsure if a current profile will work, then the CLI will actually walk you through how to create one, even going so far as to open the AWS console for you and pre-populating any fields. (You basically just have to click a few buttons, easy peasy.)

For a more in-depth walkthrough of creating a new user profile, check out this informative video from Nader Dabit.

Now that Amplify is properly configured you can start setting up AWS services in your blog!

Setting up authentication

Amplify makes adding services like Cognito for authentication very simple and straight-forward. To set up authentication run the following:

amplify add auth

Once you run the command you will be asked if you want to use the default configuration to set up authentication for your app. This is the recommended auth settings for AWS. (Choose this option if you aren’t familiar with how to configure your own user pools and Cognito configuration.) Next you need to run amplify push so that the resources can be created and configured in AWS.

After Amplify creates the remote resources for your authentication service, you need to set up Amplify in your blog. To do that you need to:

Install the necessary dependences:

npm i aws-amplify aws-amplify-react # OR yarn add aws-amplify aws-amplify-react

Next you need to import the configuration created by Amplify in src/aws-exports.js and pass it to the Amplify client. In gatsby-browser.js add the following:

Then you can update the dashboard with the “withAuthenticator” HOC. This component takes care of the entire sign up flow for you! It’s a really great component, but if you need something more specific you can always create your own sign in flow and use the Auth module available in aws-amplify package.

For an example of using the Auth module go here.

Update src/pages/dashboard.js with the following:

Once you restart Gatsby you should see the following when you visit http://localhost:8000/dashboard :

withAuthenticator rendered by Gatsby

The last thing we want to do is add a link to the dashboard from all other pages. We can add that to the Layout component. Notice in the updated Dashboard component we are now passing in a isDashboard prop. We can use this in the Layout component to determine if we should render the dashboard link or not. Update the return statement in src/components/Layout.js with the following:

Now we have a link to the dashboard where users can sign in. Go ahead and go through the auth flow to ensure everything works. If you’re curious about what is happening behind the scenes you can view your new user pool here.

Congratulations! Anyone visiting your blog can now sign in! 🎉

While this is exciting, they really can’t do much yet, so now let’s make it possible to like posts!