In OAuth authentication an application redirects the user to an external site, which offers the user a login screen. When it's done it will redirect back to a specific callback url indicated in the original redirect to google in this case. The application then makes a direct http call to google to exchange the information passed in the callback for an access_token. The access token is used to verify every API request to the backend API. The current implementation is a hybrid flow which means both the client app and the api are part of the authentication flow.
For configuration the application requires:
| Setting | Description |
|---|---|
| FF_GOOGLE_CALLBACK_URL | The url second redirect url, passed to google during the first redirect |
| FF_GOOGLE_CLIENT_ID | Unique id identifing the API |
| FF_GOOGLE_SECRET | Password to authenticate backend calls to google |
An API account needs to be setup with google to obtain the FF_GOOGLE_CLIENT_ID and FF_GOOGLE_SECRET. For security the callback requested is checked against a whitelist that needs to be given to google. For development FF_GOOGLE_CALLBACK_URL is configured as http:\\localhost:3000\callback. We suggest to configure a test only url to be http:\\localhost:8000\auth\google\callback so that the backend authentication can be tested without the front end.
1 Sign up with a google account
2 Go to https://console.cloud.google.com and select the API menu
3 press select a project at the top of the page and create a new project.
4 Go to the credentials screen menu option and press create credentials.
5 Select Select OAuth client ID, and Pick Web application.
6 Fill in an name and type http://localhost:8000 and http://localhost:3000 for the javascript origin.
7 Fill in http://localhost:8000/auth/google/callback and http://localhost:3000/callback for the redirect URI.
8 Hit save the id and secret will show up at that point
Here is a longer guide with pictures.
As an alternative to environment variables for FF_GOOGLE_CALLBACK_URL and FF_GOOGLE_CLIENT_ID. The values can be kept in config\development.ts and config\production.ts. But in particular config\development.ts would need to be removed from source control. The contents would be maintained in a separate file.