As of March 1, 2020, Midtype will be shutting down its services. Learn more.

Add Password Based Accounts to Your App

Now, in addition to signing in with Google, your users can create their own password based accounts for your app. 

To maximize conversion, the sign up process for your app needs to be as flexible as possible. That’s why we’re launching password based user registration this week. Previously, Midtype projects could only allow their users to sign in and register with a valid Google account. Now, any user can create an account for your Midtype project with their email and a custom password.

How to Use It

  1. Start by ensuring your Midtype app has a name. This will be used in email verification messages sent to your users. Go to the project settings page and click “Edit” next to where it says “Project Name.”

Give your project a display name.
Give your project a display name.

  1. Once your project has a name, go to the project authentication page, where you’ll see a new section called “Custom User Registration.” Before you can enable it, you must add at least one verification URL. When a new user enters their email to sign up, Midtype will send them an email with this link to verify they own that address. Midtype will append a verification code to the end of the URL as a query parameter, for example, https://foo.com/verify?code=?token=[VERIFICATION_CODE]. You will need this code to create an account for the user.

Add at least one verification URL and enable Custom User Registration.
Add at least one verification URL and enable Custom User Registration.

  1. Now, you can enable Custom User Registration and deploy a new version of your project.

  2. Once your project is deployed, you’re ready to start registering new users. On your site, perform a GraphQL mutation to mVerifyEmail with the user’s email and the verification URL to use (this must be one of the URLs in step 2):

mutation {
  mVerifyEmail(
    input: { email: "jane.doe@example.com", url: "https://foo.com/verify" }
  ) {
    success
  }
}
  1. The user will receive an email with the verification link. When they click it, they’ll be redirected to your site, with the verification code as a query parameter. Your frontend must grab the code and use it in the second GraphQL mutation.

  2. Ask the user for other information for their profile, mainly their name and a valid password (at least 8 characters). Use this information in a second GraphQL mutation to createMUser that includes the code included in the URL:

mutation {
  createMUser(
    input: {
      name: "Jane Doe"
      password: "[PASSWORD]"
      token: "[VERIFICATION_CODE]"
    }
  ) {
    jwtToken
  }
}

The response to this mutation includes the JWT that you can now use to authenticate subsequent API requests with the user’s credentials.