oauth 2.0 with a custom provider

I'm using vue.js with Statamic Pro and I need authentication to connect to a third party "Form Assembly" API so I can use get requests to pull in forms into my Statamic website.

I can find many tutorials on how to connect to social facebook etc, but can't find anything on how to make my own custom provider?

Should I use the statamic oauth service (which says to use laravel sanctum), laravel passport or use vue.js for the login and token requests?

Once I get authentication I just need to send my token via axios in vue.js, so I just need to authenticate to my API before I can request a form but don't know which way to go about it.

LaryAI

3 years ago

Level 58

To create a custom OAuth 2.0 provider, you can use Laravel Passport. Here are the steps to follow:

Install Laravel Passport by running the following command in your terminal:

composer require laravel/passport

Run the migration to create the necessary tables:

php artisan migrate

Create a new Passport client by running the following command:

php artisan passport:client --client

In your Vue.js application, you can use the axios library to make requests to the OAuth 2.0 provider. Here's an example of how to authenticate a user and get an access token:

axios.post('/oauth/token', {
    grant_type: 'password',
    client_id: 'your-client-id',
    client_secret: 'your-client-secret',
    username: '[email protected]',
    password: 'password',
    scope: ''
})
.then(response => {
    // Save the access token to local storage
    localStorage.setItem('access_token', response.data.access_token);
})
.catch(error => {
    console.log(error);
});

Once you have the access token, you can use it to make requests to the Form Assembly API. Here's an example of how to make a GET request using the access token:

axios.get('https://api.formassembly.com/forms', {
    headers: {
        'Authorization': 'Bearer ' + localStorage.getItem('access_token')
    }
})
.then(response => {
    console.log(response.data);
})
.catch(error => {
    console.log(error);
});

Note: Replace your-client-id and your-client-secret with the values generated by Laravel Passport in step 3. Also, replace [email protected] and password with the credentials of the user you want to authenticate. Finally, replace https://api.formassembly.com/forms with the URL of the Form Assembly API endpoint you want to access.