A Nuxt 3 project implementing various authentication strategies including JWT, Basic Auth, and OAuth along with SSO explanation. This project is a simple example of how to implement these authentication strategies in a Nuxt 3 application.
The project is structured as follows:
app: The main app directorycomponents: The components directorymiddleware: The middleware directorypages: The pages directorypublic: The public directoryserver: The server directory
The app is the main entry point for the application. It is located in the app.vue file. The file contains a header with links to the different authentication strategies and a main content area that displays the page content using NuxtPage component which uses the pages directory to display the different pages with the help of the vue-router under the hood.
The project makes use of the following components:
- JWT Login
- Session Login
- OAuth Login
Components follow the Nuxt 3 component auto-import convention you can find them under the components/LoginForm directory. They are used in the pages/index.vue file. When putting the components in a directory the name of the component is the name of the directory plus the name of the file. For example the LoginFormJWT component is located in the components/LoginForm/JWT.vue file.
Located in middleware/ directory we only have one middleware file auth.ts which is used to protect the routes that are not public.
Client-side middlewares can be used like this:
definePageMeta({
middleware: ['auth']
})or the way it is done in the project which is to handle the logic in the middleware file.
Pages are the main content of the application. They are located in the pages directory. We have index.vue page which is the main page of the application and the other pages are the different authentication strategies. The basic.vue page is the page for the basic authentication strategy. The jwt.vue page is the page for the JWT authentication strategy. The oauth.vue page is the page for the OAuth authentication strategy. The session.vue page is the page for the session authentication strategy. There is also a sso.vue page which is the page for the SSO authentication strategy. Each of these will correspond to an address. For example the basic.vue page can be accessed at http://localhost:3000/basic. And index.vue page can be accessed at http://localhost:3000/ during development.
The public directory contains the static assets of the application.
The server directory contains the server-side code of the application.
Located in server/middleware/ directory just like the client-side middleware we have one file auth.ts which is used to implement the basic authentication strategy. It checks if the path is /basic and if so it will apply the basic authentication strategy to the request. It will return a 401 Unauthorized error if the authentication fails. We also store the headers in the event context so we could get them in the client.
The project provides several authentication-related API endpoints under server/api/:
/api/auth/login.post.ts: Handle username/password login/api/auth/logout.post.ts: Handle user logout/api/auth/session.get.ts: Get current session information
/api/auth/jwt/login.post.ts: Handle JWT-based authentication/api/auth/jwt/logout.post.ts: Handle JWT-based logout
/api/auth/github/login.get.ts: Initiate GitHub OAuth flow/api/auth/github/callback.get.ts: Handle GitHub OAuth callback
/api/auth/headers.get.ts: Get headers from the request which we store in the event context in the basic authentication middleware.
Make sure to install dependencies using pnpm:
pnpm installStart the development server on http://localhost:3000:
pnpm devBuild the application for production:
pnpm buildLocally preview production build:
pnpm previewCheck out the Nuxt documentation for deployment.