Custom Provider Example

[adrian549092]

Hi everyone, web development in general is a completely new area for me not to mention VUE JS, JavaScript, and OAuth, so needless to say I am having a bit of a hard time getting everything working right, would really appreciate it if I could get some guidance on how to achieve my goal.

Thank you in advance for your time, and my apologies for the length of the post.

App Authentication Flow:

• VUE JS Front end
  • User clicks Login button
  • Frontend using vue-authenticate begins OAuth Auth Code Flow with Ping Federate OAuth server
  • When Auth Code is received, the frontend sends the Auth Code to the Backend via GraphQL API
• Python Flask + GraphQL Backend
  • Backend receives Auth Code from the frontend and completes the Auth Code Grant Flow
  • Backend responds to GraphQL query containing the Auth Code with a newly generated JWT

Implementing the OAuth2 provider added in #21

• Vue.use(VueAuthenticate, {
  • baseURL: 'http://localhost',
  • providers: {
    • pingidentity: {
      • name: 'pingidentity',
      • url: '/login',
      • clientId: process.env.VUE_APP_PI_OAUTH_CLIENT_ID,
      • redirectUri: process.env.VUE_APP_PI_OAUTH_REDIRECT_URI,
      • clientSecret: process.env.VUE_APP_PI_OAUTH_CLIENT_SECRET,
      • authorizationEndpoint: process.env.VUE_APP_PI_OAUTH_AUTHORITY_URL + process.env.VUE_APP_PI_OAUTH_AUTH_ENDPOINT,
      • optionalUrlParams: ['PFIDPADAPTERID'],
      • PFIDPADAPTERID: process.env.VUE_APP_PI_OAUTH_PFIDPADAPTERID,
      • oauthType: '2.0',
      • popupOptions: { width: 1020, height: 618 },
    • },
  • },
• });

VUE Components:

• I created a Login.vue component and included the following in the script block:
  • oauth_login(provider) {
    • this.$auth.authenticate(provider).then(() => {
      • // Execute application logic after successful social authentication
      • console.log('TEST TEST');
    • });
  • },
• I created an OauthAuthorized.vue component to handle the callback, and to submit the GraphQL call which sends over the Auth Code to the backend, and receive the JWT issued by the backend.

Question:

1. What is the purpose of the baseURL attribute? Would the baseURL be the URL for my front end app: http://localhost, or the url for my backend app: http://localhost:8080?
2. What is the purpose of the url attribute?
3. Should I be handling the submitting of the GraphQL call from the OauthAuthorized.vue component, or should it be from within the this.$auth.authenticate(provider) call?
   • I have gotten to a point where I get all the way to the OauthAuthorized.vue component and I see the page rendered for the component, but it never reaches the inner code block of the this.$auth.authenticate(provider) call where I call console.log('TEST TEST');

[dgrubelic]

1. baseUrl is the url of your backend.
2. url prop in provider config is the url where initial request to start auth will be sent.
3. You should be using this.$auth.authenticate(provider) since entire flow is implemented in vue-authenticate library and you shouldn't be doing any code -> token exchange on your own. Hope got what you are doing correctly.