Store Registrations

You can enable customers of your Reflow store to create user accounts. With an account, they can see their previous orders, manage shipping addresses and checkout faster.

Main Setup

Enabling customer logins is done from the Sign In settings page (Settings > Sign In). There you can configure each login service you wish to support.

Auth Domain and Origins

The following settings need to be filled before connecting an auth service. Their values will be shared between all services you enable later.

• Domain - The domain of your sign in page. Users will see this URL in the address bar of the sign in popup window. In Reflow it always follows the pattern [subdomain].reflowhq.com. This domain is also used for the Redirect URIs you can find further down in this guide.
• Origins - These are the unique origins that are allowed to display your sign in popup. Remember to include the (sub)domain, http/https scheme and port. Examples: https://example.com, http://localhost:1234, http://127.0.0.1:5000. You can have more than one origin.

After configuring the auth domain and origins, you can proceed with enabling one or more authentication providers. Each service follows a roughly similar set of steps - you create an application in the relevant development portal of each service and copy the CLIENT ID and CLIENT SECRET back to Reflow.

Read through the sections below for specifics.

Google

To add a Sign in with Google button to your store, you need to follow these steps:

1. Enable the "Google" provider in the Sign In settings page (Settings > Sign In), and copy the Redirect URI.
2. Visit the Google Cloud Console (opens new window), create a new project and select it when it's ready.

3. In the search box, search for "OAuth consent screen" and visit the page.

4. For User Type select the External and click Create.

5. In App information fill in your app name and support email address.

   • The email address is publicly visible. If you don't wish to expose your personal email address you can create a Google Group (opens new window) with a suitable name and choose it instead.
   • Do not select a logo. If you do, your app will have to undergo manual verification by Google. As part of the verification, you will be required to place a DNS record on your Redirect URI domain, which Reflow doesn't support currently.

6. In App domain fill in your application home page, privacy link and terms of service. Add the same domain in Authorized domains.

7. In Developer contact information enter the email address where you wish to receive system notifications. This address isn't public.
8. Press Save and Continue to proceed to the Scopes step.

9. Click the ADD OR REMOVE SCOPES button and select .../auth/userinfo.email and .../auth/userinfo.profile.
10. Press Save and Continue, then leave the Test users step without changes.
11. On the Summary step review your settings and click BACK TO DASHBOARD.
12. Press the PUBLISH APP button to make your app publicly available.

13. Visit the Credentials page (it's in the menu above OAuth consent screen, but you can reach it by searching for "api credentials").

14. Click the + CREATE CREDENTIALS button, and create a new OAuth client ID.

15. For Application type select a Web application. Give it a name.
16. In Authorized redirect URIs paste the Redirect URI from step 1 and press Create.
17. At this point a pop up will appear holding your Client ID and Client Secret. Copy them over to Reflow and save.

If you've followed the steps correctly, Google logins should now work on your store.

Apple

To add a Sign in with Apple button to your store, you need to have an active Apple Developer Program subscription. If you do, follow these steps.

1. Enable the "Apple" provider in the Sign In settings page (Settings > Sign In), and copy the Redirect URI.
2. Go to the Apple Developer portal (opens new window) and follow our detailed setup guide. In the process you will create an App ID, Services ID and Key. The guide will prompt you to copy the relevant information to Reflow at specific steps.
3. (Optional) Setup the private email relay service (see note).

Notes

• A paid Apple Developer Program subscription is required for setting up Sign in with Apple.
• Users who sign in with Apple can choose to hide their email address, in which case an Apple-hosted email relay is used. You can do additional configuration (opens new window) so that your emails are forwarded to the user's real address.
• Apple Sign in presents a different sign in flow between the first and subsequent logins. If you wish to reset your sign in state, you can do so by visiting this page (opens new window), clicking Sign in with Apple and removing your app.

Facebook

To add a Facebook Login button to your store, follow these steps.

1. Enable the "Facebook" provider in the Sign In settings page (Settings > Sign In), and copy the Redirect URI.
2. Go to the Facebook developers portal (opens new window) and create a new app. Choose Consumer as a type.

3. In Details, enter the application name and email address, and click the Create app button.
4. In the Application Dashboard, choose to set up Facebook Login.

5. In the sidebar on the left, choose the Facebook Login Settings screen.

6. In the Client OAuth settings form, paste the URL you copied in step 1 into the Valid OAuth Redirect URIs field.

7. From the sidebar, navigate to the Basic settings screen.

8. Here, enter your app's privacy policy, terms of service and data deletion URLs. You can also choose an icon 1024 by 1024px in size. This information will be displayed to users in the sign in dialog.

9. Save these settings. Then copy the App ID and App secret to Reflow.
10. In the toolbar at the top, switch App Mode from Development to Live.

11. From the Sidebar, navigate to the Permissions and Features screen.

12. Here you need to find the public_profile and email permissions and click the Get advanced access button so that you can request this information from user accounts when they sign in. Don't select additional permissions, otherwise you will need to go through App Review. (Note: open the image in a new tab to see it full size).

With this, users of your app will be able to login with their Facebook accounts in your store.

Note

Facebook gives users the option to switch off email sharing when signing in. As a result some users in your Registrations tab will have no associated email address.

Twitter

To add a Sign in with Twitter button to your store, follow these steps.

1. Enable the "Twitter" provider in the Sign In settings page (Settings > Sign In), and copy the Redirect URI.
2. Log into the Twitter Developer Portal (opens new window).
3. Create a new project. Enter a name, use case and description.

4. Create a new app and enter a name. After this step you will get API keys in the Keys and Tokens tab, but we won't need these in our integration.

5. In the App details screen click the Set up button under User authentication settings.

6. In the User authentication settings screen set leave the permissions to Read and set the type of app to Web App. Finally under Callback URI paste the redirect URI from step 1, fill in the rest of the required information.
   
   Note that although there is a "Request email from users" setting, twitter requires going through an additional application process with manual approval. We don't support this in Reflow at the moment.

7. When you save the above, you will get client id and client secret, which you need to copy over to Reflow.

With this your users will be able to sign in with Twitter in your store.

Note

Users who've signed with Twitter won't have associated email address in your Registrations tab.

GitHub

To add a Sign in with GitHub button to your store, follow these steps.

1. Enable the "GitHub" provider in the Sign In settings page (Settings > Sign In), and copy the Redirect URI.
2. Follow this guide (opens new window) in the GitHub docs for creating an OAuth app. Paste the Redirect URI from the previous step as the Authorization callback URL. Ignore the "Device Flow" setting.
3. After you save the above form, click the Generate a new client secret button. Then copy the Client ID and Client Secret back to Reflow.

Data Security

Reflow stores only the minimal set of data needed to make your logins function. The configuration data such as client ids and secrets are stored encrypted in our database. Additionally, you can review and delete all accounts connected with your store.