Skip to content

Based on vue-cli webpack boilerplate with vue-router and authentication with github

Notifications You must be signed in to change notification settings

akeshavan/vue-auth-boilerplate

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 

Repository files navigation

This app features

Getting started

First make sure you have npm and node.js installed

Next, clone the boilerplate from GitHub:

git clone https://github.com/akeshavan/vue-auth-boilerplate

Then install all npm packages:

cd vue-auth-boilerplate/my-app
npm install

To run the app, do:

npm run dev

And navigate to http://localhost:8080 (or wherever npm starts the server). As you make changes to your app, the browser will reload so you don't have to keep refreshing the page.

Setting up OAuth:

You need to set up oauth to your own server in order for this boilerplate to work.

Register a new application on GitHub

On your GitHub account, go to Settings > Developer Settings > OAuth Apps > New OAuth App. Fill out the form, making sure that your Authorization callback URL is http://localhost:8080. Take note of the client_id and client_secret of your app.

Server side

Your server endpoint should be something like http://your_rest_api.com/authenticate/code, where code is a string from GitHub that's procided by the client.

The server should return a JSON that looks like:

{"token": "secret_token_from_the_server"}

This token will be used for all future calls to your server. In this example, our server is the GitHub api.

If you don't have a server, then set one up with prose/gatekeeper and heroku

Your server needs to have the client_secret handy.

Client side

In the src/config.js file of this boilerplate app, edit it so that your client_id and authentication endpoint authUrl are correct.

export default {
authUrl: 'https://your_authentication_endpoint/',
clientId: 'your github client id',
redirectUri: 'http://localhost:8080', //eventually this will become your production url
};

Production

To build the app for production, do:

npm run build

Everything in the dist/ folder is your production app.

About

Based on vue-cli webpack boilerplate with vue-router and authentication with github

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published