ember-oauther

OAuther is a set of providers and routes to connect OAuth 1.0a and OAuth 2.0 services like facebook, google etc.

Very similar to Torii but no session manager and no adapter.

Compatibility

• Ember.js v3.28 or above
• Ember CLI v3.28 or above
• Node.js v14 or above

Installation

ember install ember-oauther

Usage

OAuth 1.0a is a 4 step process. Some steps in some providers are not allowed to use in clients (CORS). Which this is understandable because client secret must be secret. Clients are not a good place for this.

Provider	Request Token (requestTokenEndpoint)	Authentication (authenticationEndpoint)	Access Token (accessTokenEndpoint)	User Information (userInformationEndpoint)
Twitter	:x:	:heavy_check_mark:	:x:	:x:

Oauth 2.0 is a 3 step process. Some steps in some providers are not allowed to use in clients (CORS). Which this is understandable because client secret must be secret. Clients are not a good place for this.

Provider	Authorization (authorizationEndpoint)	Access Token (tokenEndpoint)	User Information (userInformationEndpoint)
Google	:heavy_check_mark:	:heavy_check_mark:	:heavy_check_mark:
Microsoft	:heavy_check_mark:	:heavy_check_mark:	:heavy_check_mark:
Facebook	:heavy_check_mark:	:heavy_check_mark:	:heavy_check_mark:
Instagram	:heavy_check_mark:	:x:	:x:
GitHub	:heavy_check_mark:	:x:	:heavy_check_mark:
LinkedIn	:heavy_check_mark:	:x:	:x:
Yandex	:heavy_check_mark:	:heavy_check_mark:	:x:
Twitch	:heavy_check_mark:	:heavy_check_mark:	:heavy_check_mark:
StackExchange	:heavy_check_mark:	:x:	:x:

All required parameters should be in environment with a name ember-oauther.

If you are seeing :x: in the provider line that you want to use and it's ok to send client secret in plain text. You have 3 options;

1. Set your own endpoint url. For example:

1ENV['ember-oauther'] = {
2  instagram: {
3    clientId: '...',
4    clientSecret: '....',
5    redirectUri: 'https://localhost:4200/instagram-sign-in',
6    scope: 'user_profile',
7    fields: 'id,username',
8    tokenEndpoint: {
9      url: 'your token endpoint url',
10    }
11  }

2. Use useCorsProxy parameter without corsProxyEndpoint parameter. For example:

1ENV['ember-oauther'] = {
2  instagram: {
3    clientId: '...',
4    clientSecret: '....',
5    redirectUri: 'https://localhost:4200/instagram-sign-in',
6    scope: 'user_profile',
7    fields: 'id,username',
8    tokenEndpoint: {
9      useCorsProxy: true,
10    }
11  }

By default it will use https://cors-anywhere.herokuapp.com.

3. Use useCorsProxy parameter with corsProxyEndpoint parameter. For example:

1ENV['ember-oauther'] = {
2  instagram: {
3    clientId: '...',
4    clientSecret: '....',
5    redirectUri: 'https://localhost:4200/instagram-sign-in',
6    scope: 'user_profile',
7    fields: 'id,username',
8    tokenEndpoint: {
9      useCorsProxy: true,
10      corsProxyEndpoint: "your cors proxy endpoint"
11    }
12  }

If you want to open a opup window instead of redirection add popup: true to env. For example;

1ENV['ember-oauther'] = {
2  popup: true,
3  // for popupOptions: https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features
4  popupOptions: {
5    width: 640,
6    heigth: 480,
7  },
8};

Or just for a single provider;

1ENV['ember-oauther'] = {
2  instagram: {
3    popup: true,
4    // for popupOptions: https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features
5    popupOptions: {
6      width: 640,
7      heigth: 480,
8    },
9    clientId: '...',
10    clientSecret: '....',
11    redirectUri: 'https://localhost:4200/instagram-sign-in',
12    scope: 'user_profile',
13    fields: 'id,username',
14    tokenEndpoint: {
15      useCorsProxy: true,
16      corsProxyEndpoint: "your cors proxy endpoint"
17    }
18  }

ember-outher has a service named oauther. All functions returns Promise.

For sign in process use;

1import Controller from '@ember/controller';
2import { action } from '@ember/object';
3import { inject as service } from '@ember/service';
4
5export default class LoginController extends Controller {
6  @service
7  oauther;
8
9  @action
10  signIn(providerName) {
11    this.oauther.signIn(providerName);
12  }
13}

For exchange token process use;

1import Controller from '@ember/controller';
2import { action } from '@ember/object';
3import { inject as service } from '@ember/service';
4
5export default class LoginController extends Controller {
6  @service
7  oauther;
8
9  @action
10  exchangeAccessToken(providerName, codeOrToken, verifier) {
11    this.oauther.exchangeAccessToken(providerName, codeOrToken, verifier);
12  }
13}

For exchange user information use;

1import Controller from '@ember/controller';
2import { action } from '@ember/object';
3import { inject as service } from '@ember/service';
4
5export default class LoginController extends Controller {
6  @service
7  oauther;
8
9  @action
10  exchangeUserInformation(providerName, accessToken, accessTokenSecret) {
11    this.oauther.exchangeUserInformation(
12      providerName,
13      accessToken,
14      accessTokenSecret
15    );
16  }
17}

You can close popup anytime with popupClose method on oauther service.

1import Controller from '@ember/controller';
2import { action } from '@ember/object';
3import { inject as service } from '@ember/service';
4
5export default class LoginController extends Controller {
6  @service
7  oauther;
8
9  @action
10  popupClose() {
11    this.oauther.popupClose();
12  }
13}

ember-oauther also provides 2 routes for redirection routes. Oauth1SignInRoute (just twitter for now) and Oauth2CodeSignInRoute.

Routes has 2 helper functions. getAccessToken and getUserInformation. Both functions takes params which also inherited from super and returns Promise.

OAuth 1.0a params

1queryParams = {
2  oauth_token: '',
3  oauth_verifier: '',
4  provider: '',
5};

OAuth 2.0 params:

1queryParams = {
2  code: '',
3  state: '',
4  scope: '',
5  provider: '',
6};

Simply extend your redirection route from the right route.

1import Oauth2CodeSignInRoute from 'ember-oauther/routes/oauth2-code-sign-in';
2
3export default class GoogleSignInRoute extends Oauth2CodeSignInRoute {
4  model(params) {
5    this.getAccessToken(params).then((accessToken) => {
6      console.log(accessToken);
7    });
8
9    // getUserInformation calls getAccessToken already, you don't need both. This is for demo purpose.
10    this.getUserInformation(params).then((data) => {
11      console.log(data);
12    });
13  }
14}

Also if you are using ember-simple-auth addon there is a complementary addon called ember-simple-auth-oauther.

It has 3 authenticators.

1. oauther: For whatever you return json data.
2. oauther-token: For same token logic with ember-simple-auth-token
3. oauther-jwt: For same jwt logic with ember-simple-auth-token

Of course you should set all required parameters in environment like;

1ENV['ember-simple-auth-oauther'] = {
2  tokenPropertyName: 'access_token',
3  serverTokenEndpoint: `${ENV.apiURL}/oauth/login`,
4  tokenExpirationInvalidateSession: false,
5  refreshAccessTokens: true,
6  refreshTokenPropertyName: 'refresh_token',
7  serverTokenRefreshEndpoint: `${ENV.apiURL}/users/refresh_token`,
8  refreshLeeway: 300,
9};

For example; you want to use your own backend and you are providing jwt access and refresh token then simply use,

1import Oauth2CodeSignInRoute from 'ember-oauther/routes/oauth2-code-sign-in';
2import { inject as service } from '@ember/service';
3
4export default class Oauth2SignInRoute extends Oauth2CodeSignInRoute {
5  @service
6  session;
7
8  model(params) {
9    this.session
10      .authenticate('authenticator:oauther-jwt', params)
11      .then(() => {
12        console.log('Logged in');
13      })
14      .catch((e) => {
15        console.error('error', e);
16      });
17  }
18}

For dummy app: oauther-test

Contributing

See the Contributing guide for details.

If you want another provider please open an issue or send a PR.

Thank you.

License

This project is licensed under the MIT License.