Skip to content

OAuth for React Client

To enable user authorization on DTaaS React client website, you will use the OAuth authorization protocol, specifically the PKCE authorization flow. Here are the steps to get started:

1. Choose Your GitLab Server:

2. Determine Your Website's Hostname:

  • Before setting up OAuth on GitLab, decide on the hostname for your website. It's recommended to use a self-hosted GitLab instance, which you will use in other parts of the DTaaS application.

3. Define Callback and Logout URLs:

  • For the PKCE authorization flow to function correctly, you need two URLs: a callback URL and a logout URL.
  • The callback URL informs the OAuth provider of the page where signed-in users should be redirected. It's different from the landing homepage of the DTaaS application.
  • The logout URL is where users will be directed after logging out.

4. OAuth Application Creation:

  • During the creation of the OAuth application on GitLab, you need to specify the scope. Choose openid, profile, read_user, read_repository, and api scopes.

5. Application ID:

  • After successfully creating the OAuth application, GitLab generates an application ID. This is a long string of HEX values that you will need for your configuration files.

6. Required Information from OAuth Application:

  • You will need the following information from the OAuth application registered on GitLab:
GitLab Variable Name Variable Name in Client env.js Default Value
OAuth Provider REACT_APP_AUTH_AUTHORITY https://gitlab.foo.com/
Application ID REACT_APP_CLIENT_ID
Callback URL REACT_APP_REDIRECT_URI https://foo.com/Library
Scopes REACT_APP_GITLAB_SCOPES openid, profile, read_user, read_repository, api

7. Create User Accounts:

Create user accounts in gitlab for all the usernames chosen during installation. The trial installation script comes with two default usernames - user1 and user2. For all other installation scenarios, accounts with specific usernames need to be created on gitlab.

Development Environment

There needs to be a valid callback and logout URLs for development and testing purposes. You can use the same oauth application id for both development, testing and deployment scenarios. Only the callback and logout URLs change. It is possible to register multiple callback URLs in one oauth application. In order to use oauth for development and testing on developer computer (localhost), you need to add the following to oauth callback URL.

1
2
3
DTaaS application URL: http://localhost:4000
Callback URL: http://localhost:4000/Library
Logout URL: http://localhost:4000

The port 4000 is the default port for running the client website.

Multiple DTaaS applications

The DTaaS is a regular web application. It is possible to host multiple DTaaS applications on the same server. The only requirement is to have a distinct URLs. You can have three DTaaS applications running at the following URLs.

1
2
3
https://foo.com/au
https://foo.com/acme
https://foo.com/bar

All of these instances can use the same gitlab instance for authorization.

DTaaS application URL Gitlab Instance URL Callback URL Logout URL Application ID
https://foo.com/au https://foo.gitlab.com https://foo.com/au/Library https://foo.com/au autogenerated by gitlab
https://foo.com/acme https://foo.gitlab.com https://foo.com/au/Library https://foo.com/au autogenerated by gitlab
https://foo.com/bar https://foo.gitlab.com https://foo.com/au/Library https://foo.com/au autogenerated by gitlab

If you are hosting multiple DTaaS instances on the same server, do not install DTaaS with a null basename on the same server. Even though it works well, the setup is confusing to setup and may lead to maintenance issues.

If you choose to host your DTaaS application with a basename (say bar), then the URLs in env.js change to:

1
2
3
4
DTaaS application URL: https://foo.com/bar
Gitlab instance URL: https://foo.gitlab.com
Callback URL: https://foo.com/bar/Library
Logout URL: https://foo.com/bar