Building the Admin Section

This guide will help you set up a secured section on your e-commerce site, where you can manage all products and orders in your online store.

Requirements

To follow this tutorial, you should be familiar with basic platformOS concepts, and the topics in the Get Started section. You should have configured the data model, as described in a previous part of this tutorial series.

Steps

Building a secured admin section is a five-step process:

Step 1: Create an admin user

Your admin panel should be accessible only to admin users, but you don’t have one just yet. After creating the instance, your user from the Partner Portal has been automatically added to your Instance. It’s now necessary to grant admin credentials to that user. You can use migrations to do that.

Go to the terminal and run the following command to create your first migration:

marketplace-kit migrations generate development add_admin

This should create a new file in your migrations folder.

marketplace_builder/migrations/{TIMESTAMP}_add_admin.liquid


{% graphql user_id = 'get_user', email: "your-email@example.com" | fetch: "users" | first | fetch: "id" %}
{% graphql res = "promote_user_to_admin", id: user_id %}
{% graphql res = "set_user_password", id: user_id, password: 'admin' %}


You need three more files to make it work. First, create a generic get_user query.

marketplace_builder/graph_queries/get_user.graphql

query get_user($id: ID, $email: String, $slug: String) {
  user(id: $id, email: $email, slug: $slug) {
    id
    name
    email
    profile(profile_type: "default") {
      properties
    }
  }
}



marketplace_builder/graph_queries/user/mutations/promote_user_to_admin.graphql

mutation promote_user_to_admin($id: ID) {
  user_update(
    form_configuration_name: "promote_user_to_admin_form"
    id: $id
    user: {
      profiles: [
        {
          name: "default"
          values: { properties: [{ name: "admin", value: "true" }] }
        }
      ]
    }
  ) {
    id
  }
}

marketplace_builder/form_configurations/user/promote_user_to_admin_form.liquid

---
name: promote_user_to_admin_form
resource_owner: "anyone"
resource: User
fields:
  profiles:
    default:
      properties:
        admin:
---

There is one more thing to do. When the Instance was created, your user has been copied, but for security reasons its password was set to a random string. You have to update it as well. You need to add one more mutation and form configuration to do just that.

marketplace_builder/graph_queries/user/mutations/set_user_password.graphql

mutation set_user_password($id: ID, $password: String) {
  user_update(
    form_configuration_name: "set_user_password_form"
    id: $id
    user: { password: $password }
  ) {
    id
  }
}

marketplace_builder/form_configurations/user/set_user_password_form.liquid

---
name: set_user_password_form
resource_owner: "anyone"
resource: User
fields:
  password:
---


Once all of these files are ready, you can run the migration with the marketplace-kit command. Substitute TIMESTAMP with migration ID from your own file.

marketplace-kit migrations run development TIMESTAMP

Step 2: Create an Authorization Policy

Your user now has the required admin credential. This allows you to create your first Authorization Policy, that you can use to secure the form you’ve just created in the previous step and reuse it to limit access to all resources in the admin panel.

marketplace_builder/authorization_policies/admin_user.liquid

---
name: admin_user
redirect_to: /unauthorized
flash_alert: Sorry, you have to be an admin user to access this page.
---

{% graphql g = 'current_user' %}
{% if g.current_user.profile.properties.admin %}true{% endif %}

marketplace_builder/graph_queries/current_user.graphql

query current_user {
  current_user {
    id
    name
    email
    profile(profile_type: "default") {
      properties
    }
  }
}


Now, that the Authorization Policy is in place, you can go ahead and modify the promote_user_to_admin_form form, so that only admins can promote other users to admins from now on.

marketplace_builder/form_configurations/user/promote_user_to_admin_form.liquid

name: promote_user_to_admin_form
resource_owner: "anyone"
resource: User
fields:
  profiles:
    default:
      properties:
        admin:
authorization_policies: [admin_user]
---

Step 3: Create a sign-in form

You are ready to create the sign-in form for your application. Sign-up will come later, after you’ve finished the management section of the app.

The whole process has been described in our documentation in the Signing in User Manually article.

You’ll need a new page and form configuration file.

marketplace_builder/views/pages/sign-in.html.liquid


---
slug: sign-in
layout_name: authorization
metadata:
  title: Sign in
---
{% include_form 'sign_in_form' %}

<hr>

<p>
  Don’t have an account yet?
  <a href="/sign-up">Sign up as a new user</a>
</p>



marketplace_builder/form_configurations/session/sign_in_form.liquid


---
name: sign_in_form
resource: Session
flash_notice: 'You are now logged in'
redirect_to: >
  {%- graphql g = 'current_user' -%}
  {%- if g.current_user.profile.properties.admin -%}
    /admin
  {%- else -%}
    /
  {%- endif -%}
fields:
  email:
  password:
---
{% form %}
  <div class="form-group">
    <label for="sign-in-email">Email</label>

    <input
      type="email"
      class="form-control{% if form_builder.errors.email != blank %} is-invalid{% endif %}"
      id="sign-in-email"
      value="{{ form_builder.fields.email.value }}"
      name="{{ form_builder.fields.email.name }}"
    />

    {% if form_builder.errors.email %}
      <div class="invalid-feedback">{{ form_builder.errors.email }}</div>
    {% endif %}
  </div>
  <div class="form-group">
    <label for="sign-in-password">Password</label>

    <input
      type="password"
      class="form-control{% if form_builder.errors.email != blank %} is-invalid{% endif %}"
      id="sign-in-password"
      name="{{ form_builder.fields.password.name }}"
    />

    {% if form_builder.errors.password %}
      <div class="invalid-feedback">{{ form_builder.errors.password }}</div>
    {% endif %}
  </div>

  <div class="form-group row">
    <div class="col-sm-12">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
{% endform %}



Step 4: Create a sign-out form

Now that you can sign in, you should be able to sign out as well. Logging Out an Authenticated User describes well what needs to be done. You’ll add the form configuration now, so that it’s ready when you are working on the top navigation and the sign out button.

marketplace_builder/form_configurations/session/sign_out_form.liquid


---
name: sign_out_form
resource: Session
---
{% form method: 'delete' %}
  <button type="submit" class="dropdown-item">Log out</button>
{% endform %}

Step 5: Create a protected page

All that is left is to add an admin index page and make sure only admins can access it.

marketplace_builder/views/pages/admin/index.liquid

---
slug: admin
authorization_policies: [admin_user]
metadata:
  title: Admin panel
---
<p>Only admins can access this page.</p>

Next steps

Congratulations! You’ve promoted your user to an admin, created sign-in and sign-out forms and added a protected area that will be used to add all administration functionalities for the website.

You are ready to do some views refactoring with shared partials to make sure that further development goes smoothly.

Questions?

We are always happy to help with any questions you may have. Check out our Help page, or contact us.