Authentication is an integral part of application development, as it helps to secure user data and authorization. In this tutorial, we'll be learning how to integrate authentication into our [Strapi](https://strapi.io/) Application, and we'll be building a simple Recipe Application with Strapi backend and [Vue.js](https://strapi.io/integrations/vuejs-cms) frontend. Users will search for recipes in this Application and will pull results from the [Edamam recipe API](https://www.edamam.com/). Users will be able to register, log in to our Application and also perform password recovery. ## Prerequisites What'll you need for this tutorial: - Basic knowledge of [Vue.js](https://strapi.io/integrations/vuejs-cms) - Knowledge of JavaScript - [Node.js](https://nodejs.org/en/) (v14 recommended for Strapi) ## What You Will Learn Here's what the final version of our Application will look like ![What we are building](https://paper-attachments.dropbox.com/s_6652E261BA17DD15A44144FAEC51E34819C2EA473414D7EF1E00B7838ADAF558_1624093807002_EB834302-38BA-4B63-8E34-06E28FC26677.png.jpg) ![What we are building](https://paper-attachments.dropbox.com/s_6652E261BA17DD15A44144FAEC51E34819C2EA473414D7EF1E00B7838ADAF558_1624094295928_C836D324-8D95-4E7D-A2AC-B6847E5CD2D9.png.jpg) ![What we are building](https://paper-attachments.dropbox.com/s_6652E261BA17DD15A44144FAEC51E34819C2EA473414D7EF1E00B7838ADAF558_1624094311975_A63A0EFE-F44B-4BB6-B7E3-726EEAAF47C1.png.jpg) > **You can find the GitHub repository for the vue application [here](https://github.com/chyke007/strapi-auth-vue). Also, see the assets used in this project: [Background image](https://github.com/chyke007/strapi-auth-vue/blob/master/public/newFood.png) & [Other assets](https://github.com/chyke007/strapi-auth-vue/tree/master/src/assets)** I hope you're very excited; let's get started with our Strapi Backend setup: ## What is Strapi? The [Strapi documentation](https://strapi.io/documentation/developer-docs/latest/getting-started/introduction.html) says that "Strapi is an open-source headless CMS that gives developers the freedom to choose their favorite tools and frameworks while also allowing editors to manage and distribute their content using their application's admin panel." By making the admin panel and API extensible through a plugin system, Strapi enables the world's largest companies to accelerate content delivery while building beautiful digital experiences. Strapi is fantastic; I'm still stunned by what Strapi can do. ## Installing Strapi The [documentation](https://strapi.io/documentation/developer-docs/latest/setup-deployment-guides/installation/cli.html) will walk you through installing Strapi from the CLI, the minimum requirements for running Strapi, and how to create a quickstart project. The Quickstart project uses SQLite as the default database, but feel free to use whatever database you like. ```bash yarn create strapi-app my-project //using yarn npx create-strapi-app my-project --quickstart //using npm ``` Replace `my-project` with the name you wish to call your application directory. Your package manager will create a directory with the name and will install Strapi. If you have followed the instructions correctly, you should have Strapi installed on your machine. Run the following command: ```bash yarn develop //using yarn npm run develop //using npm ``` To start our development server, Strapi starts our app on `http://localhost:1337/admin`. ## Building our Bookmarks Collection Type Next, we are going to create the Bookmarks Collection Type. Follow these steps below to create your first Collection Types. 1. Open up the Strapi admin panel. 2. Navigate to the Content-Type Builder section 3. Under Collection Types, click "create new collection type." 4. A popup window should come up and prompt you to enter a display name, type `bookmark` and then click Continue. 5. Another popup should come up where you can choose the fields you want the Collection-Type to have. Next, we are going to choose all the fields on the Notes Collection Type. Follow the step below to choose your types. 1. On the popup window, click `Text`, name the field `label`, leave the type selection as `Short Text`, and add another field. - Select `Text`, name the field `source`, leave the type selection as `Short Text`, and click on add another field. - Select `Text`, name the field `image`, leave the type selection as `Short Text`, and click on add another field. - Select `Text`, name the field `url`, leave the type selection as `Short Text`, and next, add another field. - Select `Number`, name the field `yield`, set the Number format selection as `Integer`, and next, add another field. - Select `Number`, name the field `totalTime`, set the Number format selection as `decimal`, and next, add another field. 2. Select `JSON`, name the field `ingredientLines`, then click on add another field. 3. Select `Relations`, and then click on the dropdown on the right side of the popup window, select `User (from: users-permissions-user)`, then click on `Users` have many bookmarks. It should look like the image below. ![https://www.dropbox.com/scl/fi/2ngd3mqnbhaa3mionfaic/Strapi’s-User-Roles-and-Permissions-for-Admin-Panel.paper?dl=0&rlkey=p5csztcc3ndqfdid975vyggzb](https://paper-attachments.dropbox.com/s_856951F2DEA512988ABC48350004955CA625D24E70EB254349A9E4FCCB0D0D45_1653339413075_Screen+Shot+2022-05-23+at+9.56.47+PM.png) 4. Click on the Finish. If you follow the steps above correctly, the final bookmarks collection type schema should look like the image below. ![Bookmark Collection Type](https://paper-attachments.dropbox.com/s_856951F2DEA512988ABC48350004955CA625D24E70EB254349A9E4FCCB0D0D45_1653947244733_Screen+Shot+2022-05-30+at+10.47.20+PM.png) 5. Finally, click on the Save button. ## Setting the Permissions for Authenticated Users Now that we have successfully created our Bookmark Content Types, let's add and assign a permission level on the bookmarks Collection-Type for an authenticated user by following the steps below. 1. Click on Settings under `GENERAL` in the side menu 2. Click on Roles under *Users and Permissions* Plugin. 3. It will display a list of roles. Click on Authenticated 4. Scroll down, under Permissions, click on Bookmark, then check the `Create`, `findOne`, and `find` checkboxes. 5. Click save, then go back. ## Setting the Permissions for Public Users Next, we will create and assign permissions on notes collection-type for our public users by following the steps below. 1. Click public 2. Scroll down, click on *users-permissions* under *permissions*, then check all the checkboxes. 3. Click save, then go back. ## Password Recovery Setup On the side menu bar, under settings, 1. Under `Users & Permission plugin`, click on `Advanced settings`. 2. Fill up the `Reset password page` input with the following url, `http://localhost:8080/resetpassword`. 3. Click save, then go back. ## Getting our Edamam Recipe API Credentials To obtain Edamam Recipe API credentials, follow the steps below: 1. Visit [https://www.edamam.com/](https://www.edamam.com/). 2. Under `Recipe search API`, click `More info`. 3. Under Developer, click `Get Started`. 4. Enter your credentials to sign up. 5. Next Sign in to the `Edamam APIs`. 6. Click `Go to Dashboard`. 7. Click `Create a new Application`. 8. Select `Recipe search API`. 9. On the next page, give the Application a name and a description. 10. Click `Create Application`. 11. The next page that's rendered should contain your `Application ID` and `Application keys`. Now, we're done with both our backend setup, and we have our API credentials. We can proceed with installing Vue.js and building the Front-end of our Application. ## Installing Vue.js Next, we will install and configure Vue.Js to work with our Strapi backend. To install Vue.js, using the @vue/cli package visit the [Vue CLI docs](https://cli.vuejs.org/guide/installation.html) or run one of these commands to get started. We used Vue 2 for this project. ```bash npm install -g @vue/cli # OR yarn global add @vue/cli ``` Once the vue CLI is installed on your local machine, run the following commands to create a Vue.js project. ```bash vue create my-project ``` Replace `my-project` with the name you wish to call your project. The above command should start a command-line application that walks you through creating a Vue.js project. Select whatever options you like, but select `Router`, `Vuex`, and `linter/formatter` because the first two are essential in our Application, then the last one is to format our code nicely. After vue CLI is done creating your project, run the following command. ```bash cd my-project yarn serve //using yarn npm serve //using npm ``` Finally, visit the following URL: `\[http://localhost:8080\](http://localhost:8080/)` to open your Vue.js Application in your browser. ## Integrating TailwindCss with Vue.js We are going to use [TailwindCSS](https://tailwindcss.com/) as our CSS framework. Let's see how we can integrate TailwindCSS into our Vue.js Application. * Run this command: ```bash npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 or yarn add tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 ``` - Then in the root of your Vue.js folder, create a `postcss.config.js` and fill it up with the following lines. ```js module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, } } ``` - Also, in the root of the Vue.js folder create a `tailwindcss.config.js` and fill it up with the following lines. ```js module.exports = { purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'], darkMode: false, // or 'media' or 'class' theme: { extend: { fontFamily: { 'pacifico': ['Pacifico'], 'montserrat': ['Montserrat'], 'roboto': ['Roboto'], 'righteous': ['Righteous'], 'lato': ['Lato'], 'raleway': ['Raleway'], } }, }, variants: { extend: {}, }, plugins: [], } ``` - We've extended the components of the font by adding some fonts which we will use. These fonts have to be installed in your local machine to work appropriately but feel free to use whatever fonts you like. - Finally, create a `index.css` file in your `src` folder and add the following lines ```css /* ./src/main.css */ @tailwind base; @tailwind components; @tailwind utilities; ``` ## Installing Vue-fontawesome with Vue.js Font-awesome is a package that we’ll use for getting and rendering icons in our application. Execute the following commands to install [vue-fontawesome](https://github.com/FortAwesome/vue-fontawesome) on your machine ```bash npm i --save @fortawesome/fontawesome-svg-core npm i --save @fortawesome/free-solid-svg-icons npm i --save @fortawesome/vue-fontawesome or yarn add @fortawesome/fontawesome-svg-core yarn add @fortawesome/vue-fontawesome yarn add @fortawesome/vue-fontawesome ``` ## Installing Vue-Axios We need a package for making API calls to our Strapi backend, and we'll be using the [Vue-Axios](https://www.npmjs.com/package/vue-axios) package for that purpose. Run the following command to install Vue-Axios in your machine: ```bash npm install --save axios vue-axios vue-router vuex or yarn add axios vue-axios vue-router vuex ``` ## Installing Vue-Progress-Path Next, we need a way to show our users that data is being fetched from an API. We'll do that using the [Vue-progress-path](https://akryum.github.io/vue-progress-path/?ref=madewithvuejs.com) package. Execute the following commands to install Vue-progress-path in your machine ```bash npm i -S vue-progress-path yarn add vue-progress-path ``` ## Integrating All the Installed Packages into Our Vue.js Application What've we've done above is to install the packages. Vue.js has no idea what to do with the installed packages, so we're going to tell Vue.js what to do with the packages. * Open up the `main.js` file that is located in the `src` folder and replace the contents of the file with the following code ```js import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' import axios from 'axios' import vueAxios from 'vue-axios' import './index.css' import { library } from '@fortawesome/fontawesome-svg-core' import { faArrowRight, faArrowLeft, faSearch, faBookmark, faShare, faClock, faCheck, faUserCircle, faTrash, faBars, faTimes } from '@fortawesome/free-solid-svg-icons' import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' import 'vue-progress-path/dist/vue-progress-path.css' import VueProgress from 'vue-progress-path' library.add(faArrowRight, faArrowLeft, faSearch, faBookmark, faShare, faClock, faCheck, faUserCircle, faTrash, faBars, faTimes) Vue.component('font-awesome-icon', FontAwesomeIcon) Vue.use(vueAxios, axios) Vue.use(VueProgress, { // defaultShape: 'circle', }) Vue.config.productionTip = false new Vue({ router, store, render: h => h(App) }).$mount('#app') ``` * Next, open the `App.vue` file in `src` and replace it with the following codes. ```js ``` ## Building the Frontend Let’s begin building the front-end of our application. #### Building the Homepage To build the homepage, create an `Home.vue` file located in the `src/views` folder, and add the following lines of code to the file. ```js ``` #### Building our Nav Component To build a component, follow the steps below: * Execute the commands in other to create a `Nav.vue` file in the components folder ```bash cd components touch Nav.vue ``` * Open up the `Nav.vue` file and fill it up with the following lines of code. ```js ``` #### Building the HeroSection Component Below are the steps to build this component: * Execute the commands in other to create a `HeroSection.vue` file in the components folder ```bash cd components touch HeroSection.vue ``` * Open up the `HeroSection.vue` file and fill it up with the following lines of code. ```bash ``` #### Building the FeaturedSection Component To build the FeaturedSection component: * Execute the commands in other to create a `FeaturedSection.vue` file in the components folder ```bash cd components touch FeaturedSection.vue ``` * Open up the `FeaturedSection.vue` file and fill it up with the following lines of code. ```js ``` #### Configuring Vue-Router We need routing functionality in our Application. Luckily for us, we installed the Vue-router package when creating our project. Create a `router/index.js` file, and fill it up with the following lines of codes ```js import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' import Register from '../views/Register.vue' import Login from '../views/Login.vue' import Explore from '../views/Explore.vue' import Recipe from '../views/Recipe.vue' import Bookmarks from '../views/Bookmarks.vue' import BookmarkId from '../views/BookmarkId.vue' import ForgotPassword from '../views/ForgottenPassword.vue' import ResetPassword from '../views/ResetPassword.vue' Vue.use(VueRouter) const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/register', name: 'Register', component: Register }, { path: '/login', name: 'Login', component: Login }, { path: '/explore', name: 'Explore', component: Explore }, { path: '/recipe/:id', name: 'Recipe', component: Recipe }, { path: '/bookmarks', name: 'Bookmarks', component: Bookmarks }, { path: '/bookmark/:id', name: 'BookmarkId', component: BookmarkId }, { path: '/forgotpassword', name: 'ForgotPassword', component: ForgotPassword }, { path: '/resetpassword', name: 'ResetPassword', component: ResetPassword } ] const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }) export default router ``` ## Configuring Vuex Store Now we have router functionalities in our application, next we’ll set up our `vuex` store. * Create a `store` folder in `src` folder, and create a new `index.js` file with the following code. ```js import Vue from "vue"; import Vuex from "vuex"; import Results from "./results.js"; Vue.use(Vuex); export default new Vuex.Store({ modules: { Results } }); ``` * Execute the following command to create a `results.js` file in the `src/store` directory ```bash cd store touch results.js ``` * Open up the `results.js` file and fill it up with the following code. ```js import Vue from "vue"; const state = { searchParam: '', searchResults: [], bookmarks: JSON.parse(window.localStorage.getItem('bookmarks')) } const getters = { getSearchResults: state => state.searchResults, getSearchParam: state => state.searchParam, getBookmarks: state => { return state.bookmarks } } const actions = { async fetchSearchResult ({ commit }, searchItem) { const res = await Vue.axios.get(`https://api.edamam.com/search?q=${searchItem}&app_id=${APP_ID}&app_key=${APP_KEY}&from=0&to=20`) const results = res.data.hits commit('updateSearchResults', results) }, async fetchSearchItem ({ commit }, item) { commit('updateSearchItem', item) } } const mutations = { updateSearchResults: (state, results) => { state.searchResults = results }, updateSearchItem: (state, item) => { state.searchParam = item } } export default { state, getters, actions, mutations } ``` Here we've created our store. On line 17, we make an API call to the `Edamam recipe API` using the `Vue-Axios` package we installed earlier, and then we commit the results to the store. Replace `${APP_ID}` and `${APP_KEY}` with your Edamam `Application ID` and `Application key`, respectively. Let’s build the other routes of our application. ## Building the Explore Page To create this page: * Execute the commands in other to create a `Explore.vue` file in the views folder ```bash cd views touch Explore.vue ``` * Open up the `Explore.vue` file and fill it up with the following lines of code. ```js ``` ## Building the SearchResults Component Follow the steps below to build the component. * Execute the commands in other to create a `SearchResults.vue` file in the `components` folder ```bash cd components touch SearchResults.vue ``` * Open up the `SearchResults.vue` file and fill it up with the following lines of code. ```js ``` In this component, we display the User's search results and give the User the ability to create bookmarks. ## Building the Recipe Page * Execute the commands in other to create a `Recipe.vue` file in the views folder ```bash cd views touch Recipe.vue ``` * Open up the `Recipe.vue` file and fill it up with the following lines of code. ```js ``` Here we just created the view for individual recipes, and this page displays the ingredients, name, and a link to the procedures for preparing the meal. ## Building the Bookmarks Page To build the Bookmarks page: * Execute the commands in other to create a `Bookmarks.vue` file in the views folder ```bash cd views touch Bookmarks.vue ``` * Open up the `Bookmarks.vue` file and fill it up with the following lines of code. ```bash ``` ## Building the BookmarkID Page * Execute the commands in other to create a `BookmarkId.vue` file in the views folder ```bash cd views touch BookmarkId.vue ``` * Open up the `BookmarkId.vue` file and fill it up with the following lines of code. ```js ``` This page displays individual bookmarks. Users have the ability to delete bookmarked items. ## User Registration Let's see how we can add user registration to our site. Once users register, then they can create bookmarks. #### Building the Registration Page * Execute the commands in other to create a `Register.vue` file in the views folder ```bash cd views touch Register.vue ``` * Open up the `Register.vue` file and fill it up with the following lines of code. ```js ``` In the code block above, we're integrating user signup and redirecting the users to the login page on successful registration. ## User Login * Execute the commands in other to create a `Login.vue` file in the views folder ```bash cd views touch Login.vue ``` * Open up the `Login.vue` file and fill it up with the following lines of code. ```js ``` In the code block above, we're integrating user login and redirecting the users to the `Homepage` on successful Login. We're also storing `user details` and `JWT` in localStorage. ## Forgotten Password To create a channels for users to recover their forgotten passwords: * Execute the commands in other to create a `ForgottenPassword.vue` file in the views folder ```bash cd views touch ForgottenPassword.vue ``` * Open up the `ForgottenPassword.vue` file and fill it up with the following lines of code. ```js ``` Here, users can request a password reset, and Strapi will send a message to the email address that the User enters on the page. The sent mail will possess a link that resembles the following: `http://localhost:8080/resetpassword?code=9d99862a974907c375988ed4727173d56983dbcfb7c400f006ca47958e07089f950de8979d0ae3a8fab684f1b73b55910b04fe448b77c92178cabf4b3c58e77f` ## Setting up Email with Strapi-Provider-Email-Nodemailer We'll be using the [Strapi-provider-email-nodemailer](https://github.com/strapi/strapi/tree/master/packages/providers/email-nodemailer) package to configure and send emails. * Open up your Strapi backend in your code editor and run the following command to install the `Strapi-provider-email-nodemailer`. Using yarn, run: ```bash yarn add @strapi/provider-email-nodemailer ``` If you'd prefer to use npm, run: ```bash npm install @strapi/provider-email-nodemailer --save ``` * Navigate to the `config` directory and create a `plugins.js` file and fill it up with the following code ```js module.exports = ({ env }) => ({ email: { config: { provider: 'nodemailer', providerOptions: { host: env('SMTP_HOST', 'smtp.gmail.com'), port: env('SMTP_PORT', 465), auth: { user: env('GMAIL_USER'), pass: env('GMAIL_PASSWORD'), }, // ... any custom nodemailer options }, settings: { defaultFrom: 'noreply@recipee.com', defaultReplyTo: 'noreply@recipee.com', }, }, }, }); ``` * Open up your `.env` file and add the following line of code ``` SMTP_HOST = smtp.gmail.com SMTP_PORT = 465 GMAIL_USER = YOUR_GMAIL_ADDRESS GMAIL_PASS = YOUR_GMAIL_PASSWORD ``` Now we have email services configured, and we can finally create our reset password page and logic. ## Reset Password * Execute the commands in other to create a `ResetPassword.vue` file in the views folder ```bash cd views touch ResetPassword.vue ``` * Open up the `ResetPassword.vue` file and fill it up with the following lines of code. ```js ``` Now, users can input a new password that will be used to access their accounts, after which they are redirected to the login page. Users who lost their passwords can now resume using our Application. ## Conclusion That's all for this article, and I hope you're well equipped to integrate user authentication into your Strapi Application. > **You can find the GitHub repository for the vue application [here](https://github.com/chyke007/strapi-auth-vue). Also, see the assets used in this project: [Background image](https://github.com/chyke007/strapi-auth-vue/blob/master/public/newFood.png) & [Other assets](https://github.com/chyke007/strapi-auth-vue/tree/master/src/assets)**

Recipee

FIND THE
WORLD'S BEST
RECIPES ONLINE

THE BEST MEALS
IN THE UNIVERSE AWAITS

LEARN HOW
TO PREPARE MEALS YOU LOVE

RESULTS

{{ item.recipe.label }}

{{ item.label }}

Sign Up. To. Join Recipee

Name

Email

Password

Username

Login. To. Recipee

Email

Password

Recover Your. Recipee. Password

Email

Recover Your. Recipee. Password

Password

Confirm Password

Recipee

FIND THE WORLD'S BEST RECIPES ONLINE

THE BEST MEALS IN THE UNIVERSE AWAITS

LEARN HOW TO PREPARE MEALS YOU LOVE

RESULTS

{{ item.recipe.label }}

Sign Up. To. Join Recipee

Name

Email

Password

Username

Login. To. Recipee

Email

Password

Recover Your. Recipee. Password

Email

Recover Your. Recipee. Password

Password

Confirm Password

FIND THE
WORLD'S BEST
RECIPES ONLINE

THE BEST MEALS
IN THE UNIVERSE AWAITS

LEARN HOW
TO PREPARE MEALS YOU LOVE