Now we are gonna setup an auth0 account, orour authentication for our endpoints, and do a quick review of our package.json file.

Let’s first setup our auth0 account. Go to this link.

Now signup with you email, and have your email as your tenant name.

Then make it a personal account, have role be developer, and make your project to Just Playing Around.

Now it will take you to the Dashboard, in which you will create a new application. Name your app mern-ecommerce-app and make it a single-page application.

Let’s start by setting up our variables in our .env file. We’ll head to our settings tab. Then you will copy client_id, auth0_domain and client_secret. Then paste it in your .env file, and name the variables REACT_APP_AUTH0_CLIENT_ID, REACT_APP_AUTH0_DOMAIN, and REACT_APP_AUTH0_CLIENT_SECRET. NOTE: You need REACT_APP, so you can access those variables in the front end.

REACT_APP_AUTH0_CLIENT_ID = <client id>
REACT_APP_AUTH0_CLIENT_SECRET = <client secret>
REACT_APP_AUTH0_DOMAIN = <auth0 domain>

Also have your callback url equal to http://localhost:3000/auth/callback. Which enables auth0 to automatically return that url in your frontend. Therefore it takes away the need for a axios call in your frontend. In your setting tab. NOTE: The same tab we are in.

We have out variables to setup authentication. Go to social connections and enable which ones you want, in this case we’ll have to just enable github, and facebook since it is the easiest ones to authenticate.

Awesome now we have our setup. Let’s explain how our data is spread with Auth0.

  1. It will redirect the user to our auth0 domain.
  2. Then it will go to the social provider the user picks.
  3. Social Provider gives access to Auth0
  4. Auth0 sends a authorization_code to your backend
  5. Server sends back an object with a client_id, client_secret, grant_type, redirect_uri, and the code received at step 4.
  6. Auth0 sends access_token, which will be used to request user information.
  7. Server Gets the access_token to exchange to get user information.
  8. Therefore Auth0 sends back user information, where will setup the user info to the session and put in our database.
  9. Server redirect user back to client.
  10. componentDidMount runs a axios call to request user session from server.
  11. Server sends info back to client.

Now Lets do a quick review of how we have our package.json setup. Look at our proxy property in our package.json. We have two proxies, one which is the /auth/callback which is the base path for auth0, and the /api is the base path for all of our api calls to our backend. The target is the proxy itself with port app is running on.

 "proxy": {"/auth/callback": {"target": "http://localhost:5000"},"/api": {"target": "http://localhost:5000"}},

Before setting up authentication change the endpoint in your index.js file responsible logging in to match the auth0 proxy, and make it a get.

//BEFORE
app.post('/api/login', userController.login);
//AFTER
app.get('/auth/callback', userController.login);

Finally let’s setup our authentication on our app. Go to your user_controller file in server/controllers folder. We will get an user’s access token, (step 5) using a post request to you auth0 domain through oauth. Then pass a object with the required options which will be client_id, client_secret, code, grant_type, and redirect_uri.

return axios.post(`https://${process.env.REACT_APP_AUTH0_DOMAIN}/oauth/token`, { client_id: process.env.REACT_APP_AUTH0_CLIENT_ID, client_secret: process.env.REACT_APP_AUTH0_CLIENT_SECRET, code: req.query.code, grant_type: 'authorization_code', redirect_uri: `http://${req.headers.host}/auth/callback`}).then(accessTokenResponse => { //Now Get user info }).catch(err => console.log('Auth0 Axios Post backend Error------------', err));

Now we are getting our response with our access token, we will then assign a variable called accessToken for good measure to assign it to the accessTokenResponse.data.access_token.

const accessToken = accessTokenResponse.data.access_token

We will return a get request to you auth0_domain using our accessToken as a query parameter. Which will return our user data. We will use a .find({}) to our collection with that data primarily the auth0 id to find an identical user . Or it will add to our users collections in the database. Either way it is assign userData to the session then saving the session to local storage before redirecting the user home.

return axios.get(`https://${process.env.REACT_APP_AUTH0_DOMAIN}/userinfo?access_token=${accessToken}`).then(userDataResponse => { //Destruct the  data from  from auth0 const { name, nickname, email, picture, sub } =          userDataResponse.data; console.log('user data--------', userDataResponse.data);  // res.status(200).json({message: 'mEssages'})  User.findOne({auth0_id: sub}, (err, user) => {  if(err) console.log('Login Error--------------', err);  //If the user is undefined.  if(!user) {   //Create a new user.  let newUser = new User({   name: name,   email: email,   username: nickname,   profile_picture: picture,   auth0_id: sub  }); //Assign the user to the session.  req.session.user = newUser;  //Save the session  req.session.save();  //Save the newUser instance to mongodb  newUser.save(); }  req.session.user = user;  req.session.save();  res.redirect('/'); }) }).catch(err => console.log('Auth0 get user info Error------------', err));

Notice something wrong? Our model doesn’t have a profile_picture property so go to your models folder, and in your user.js file add a profile picture with a String datatype. Our new model should look like this.

const user = new Schema({//THis is where the user will login//For Now we will be inserting test dataname: String,email: String,username: String,auth0_id: String,profile_picture: String});

While we are adding properties to the models we will add a picture property to the product also in our product.js file. Our new model should look like this.

//Need an id, name, description, price,//Id is created by default in mongodbconst product = new Schema({name: String,description: String,price: Number,picture: String});

Now that we have all of our authentication. We will handle all that data in the front, and add a couple of cool features to our app. Auth0 can be extremely be exhausting and frustrating so always contact me if you encounter issues and send me snapshots of your code. Here is my facebook, linkedin or instagram for help or comment below issues, so I can help.

Here is my github for reference:

Now we will finish auth0.

Happy Coding!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store