├── .gitignore ├── .vscode └── settings.json ├── backend ├── manage.py ├── nuxt_django_auth │ ├── __init__.py │ ├── api.py │ ├── asgi.py │ ├── serializers.py │ ├── settings.py │ ├── social.py │ ├── urls.py │ └── wsgi.py └── requirements.txt ├── frontend ├── .editorconfig ├── .eslintrc.js ├── .gitignore ├── .prettierrc ├── .template.env ├── README.md ├── assets │ ├── README.md │ └── css │ │ └── tailwind.css ├── components │ ├── Logo.vue │ └── README.md ├── jsconfig.json ├── layouts │ ├── README.md │ └── default.vue ├── middleware │ └── README.md ├── nuxt.config.ts ├── package.json ├── pages │ ├── README.md │ ├── callback.vue │ ├── index.vue │ ├── login.vue │ └── secret.vue ├── plugins │ └── README.md ├── static │ ├── README.md │ └── favicon.ico ├── store │ ├── README.md │ └── index.ts ├── stylelint.config.js ├── tailwind.config.js ├── tsconfig.json ├── types │ └── vue-shim.d.ts └── yarn.lock ├── readme.md └── tsconfig.json /.gitignore: -------------------------------------------------------------------------------- 1 | # Mypy type cache 2 | .mypy_cache 3 | 4 | # Byte-compiled / optimized / DLL files 5 | __pycache__/ 6 | *.py[cod] 7 | *$py.class 8 | *.rdb 9 | *.sublime-project 10 | *.sublime-workspace 11 | maintenance_mode_state.txt 12 | docker-stack-*.yml 13 | # C extensions 14 | # 15 | *.icloud 16 | .DS_store 17 | 18 | 19 | # Distribution / packaging 20 | .Python 21 | env/ 22 | develop-eggs/ 23 | dist/ 24 | downloads/ 25 | eggs/ 26 | .eggs/ 27 | lib/ 28 | lib64/ 29 | parts/ 30 | sdist/ 31 | var/ 32 | *.egg-info/ 33 | .installed.cfg 34 | *.egg 35 | build/ 36 | 37 | # PyInstaller 38 | # Usually these files are written by a python script from a template 39 | # before PyInstaller builds the exe, so as to inject date/other infos into it. 40 | *.manifest 41 | *.spec 42 | 43 | # Installer logs 44 | pip-log.txt 45 | pip-delete-this-directory.txt 46 | 47 | # Unit test / coverage reports 48 | htmlcov/ 49 | .tox/ 50 | .coverage 51 | .coverage.* 52 | .cache 53 | nosetests.xml 54 | coverage.xml 55 | *,cover 56 | .hypothesis/ 57 | 58 | # Translations 59 | *.mo 60 | *.pot 61 | 62 | # Django stuff: 63 | *.log 64 | db.sqlite3 65 | local_settings.py 66 | project/staticfiles/ 67 | !project/staticfiles/hithere.txt 68 | staticfiles 69 | 70 | # Flask stuff: 71 | instance/ 72 | .webassets-cache 73 | 74 | # Scrapy stuff: 75 | .scrapy 76 | 77 | # Sphinx documentation 78 | docs/_build/ 79 | 80 | # PyBuilder 81 | target/ 82 | 83 | # IPython Notebook 84 | .ipynb_checkpoints 85 | *.ipynb 86 | 87 | # pyenv 88 | .python-version 89 | 90 | # celery beat schedule file 91 | celerybeat-schedule 92 | 93 | # virtualenv 94 | venv/ 95 | ENV/ 96 | 97 | # Spyder project settings 98 | .spyderproject 99 | 100 | # Rope project settings 101 | .ropeproject 102 | 103 | # Node Stuff 104 | 105 | # Logs 106 | logs 107 | *.log 108 | npm-debug.log* 109 | yarn-debug.log* 110 | yarn-error.log* 111 | 112 | # Runtime data 113 | pids 114 | *.pid 115 | *.seed 116 | *.pid.lock 117 | 118 | # Directory for instrumented libs generated by jscoverage/JSCover 119 | lib-cov 120 | 121 | # Coverage directory used by tools like istanbul 122 | coverage 123 | 124 | # nyc test coverage 125 | .nyc_output 126 | 127 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 128 | .grunt 129 | 130 | # Bower dependency directory (https://bower.io/) 131 | bower_components 132 | 133 | # node-waf configuration 134 | .lock-wscript 135 | 136 | # Compiled binary addons (https://nodejs.org/api/addons.html) 137 | build/Release 138 | 139 | # Dependency directories 140 | node_modules/ 141 | node_modules_cache/ 142 | jspm_packages/ 143 | 144 | 145 | # Optional npm cache directory 146 | .npm 147 | 148 | # Optional eslint cache 149 | .eslintcache 150 | 151 | # Optional REPL history 152 | .node_repl_history 153 | 154 | # Output of 'npm pack' 155 | *.tgz 156 | 157 | # Yarn Integrity file 158 | .yarn-integrity 159 | 160 | # parcel-bundler cache (https://parceljs.org/) 161 | .cache 162 | 163 | # next.js build output 164 | .next 165 | 166 | # nuxt.js build output 167 | .nuxt 168 | 169 | # vuepress build output 170 | .vuepress/dist 171 | 172 | # Serverless directories 173 | .serverless 174 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "prettier.configPath": "./frontend/.prettierrc", 3 | "eslint.workingDirectories": ["./frontend"], 4 | "eslint.validate": ["typescript", "javascript", "vue"], 5 | "editor.formatOnSave": true, 6 | "python.formatting.provider": "black", 7 | "python.linting.enabled": true, 8 | "python.linting.pylintEnabled": true 9 | } 10 | -------------------------------------------------------------------------------- /backend/manage.py: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env python 2 | """Django's command-line utility for administrative tasks.""" 3 | import os 4 | import sys 5 | 6 | 7 | def main(): 8 | os.environ.setdefault("DJANGO_SETTINGS_MODULE", "nuxt_django_auth.settings") 9 | try: 10 | from django.core.management import execute_from_command_line 11 | except ImportError as exc: 12 | raise ImportError( 13 | "Couldn't import Django. Are you sure it's installed and " 14 | "available on your PYTHONPATH environment variable? Did you " 15 | "forget to activate a virtual environment?" 16 | ) from exc 17 | execute_from_command_line(sys.argv) 18 | 19 | 20 | if __name__ == "__main__": 21 | main() 22 | -------------------------------------------------------------------------------- /backend/nuxt_django_auth/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Maronato/nuxt-django-auth/5c9cba6c75f62909aab29f52811aa72e44304efe/backend/nuxt_django_auth/__init__.py -------------------------------------------------------------------------------- /backend/nuxt_django_auth/api.py: -------------------------------------------------------------------------------- 1 | from django.contrib.auth import get_user_model 2 | from rest_framework.generics import RetrieveAPIView 3 | from .serializers import UserSerializer 4 | 5 | User = get_user_model() 6 | 7 | 8 | class UserInfo(RetrieveAPIView): 9 | serializer_class = UserSerializer 10 | queryset = User.objects.all() 11 | 12 | def get_object(self): 13 | return self.request.user 14 | -------------------------------------------------------------------------------- /backend/nuxt_django_auth/asgi.py: -------------------------------------------------------------------------------- 1 | """ 2 | ASGI config for nuxt_django_auth project. 3 | 4 | It exposes the ASGI callable as a module-level variable named ``application``. 5 | 6 | For more information on this file, see 7 | https://docs.djangoproject.com/en/3.0/howto/deployment/asgi/ 8 | """ 9 | 10 | import os 11 | 12 | from django.core.asgi import get_asgi_application 13 | 14 | os.environ.setdefault("DJANGO_SETTINGS_MODULE", "nuxt_django_auth.settings") 15 | 16 | application = get_asgi_application() 17 | -------------------------------------------------------------------------------- /backend/nuxt_django_auth/serializers.py: -------------------------------------------------------------------------------- 1 | from django.contrib.auth import get_user_model 2 | from rest_framework import serializers 3 | 4 | User = get_user_model() 5 | 6 | 7 | class UserSerializer(serializers.ModelSerializer): 8 | class Meta: 9 | model = User 10 | fields = ["id", "username", "email"] 11 | -------------------------------------------------------------------------------- /backend/nuxt_django_auth/settings.py: -------------------------------------------------------------------------------- 1 | """ 2 | Django settings for nuxt_django_auth project. 3 | 4 | Generated by 'django-admin startproject' using Django 3.0.7. 5 | 6 | For more information on this file, see 7 | https://docs.djangoproject.com/en/3.0/topics/settings/ 8 | 9 | For the full list of settings and their values, see 10 | https://docs.djangoproject.com/en/3.0/ref/settings/ 11 | """ 12 | 13 | import os 14 | 15 | # Build paths inside the project like this: os.path.join(BASE_DIR, ...) 16 | BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) 17 | 18 | 19 | # Quick-start development settings - unsuitable for production 20 | # See https://docs.djangoproject.com/en/3.0/howto/deployment/checklist/ 21 | 22 | # SECURITY WARNING: keep the secret key used in production secret! 23 | SECRET_KEY = "ly9ozcj0v*su9%$c-roi+m&-*6lueyu!7eqvtu+%v5$u7p6m^u" 24 | 25 | # SECURITY WARNING: don't run with debug turned on in production! 26 | DEBUG = True 27 | 28 | ALLOWED_HOSTS = [] 29 | 30 | 31 | # Application definition 32 | 33 | INSTALLED_APPS = [ 34 | "django.contrib.admin", 35 | "django.contrib.auth", 36 | "django.contrib.contenttypes", 37 | "django.contrib.sessions", 38 | "django.contrib.messages", 39 | "django.contrib.staticfiles", 40 | "django.contrib.sites", 41 | "django_extensions", 42 | "rest_framework", 43 | "rest_framework.authtoken", 44 | "allauth", 45 | "allauth.account", 46 | "allauth.socialaccount", 47 | "allauth.socialaccount.providers.facebook", 48 | "dj_rest_auth", 49 | "dj_rest_auth.registration", 50 | "corsheaders", 51 | ] 52 | 53 | MIDDLEWARE = [ 54 | "corsheaders.middleware.CorsMiddleware", 55 | "django.middleware.security.SecurityMiddleware", 56 | "django.contrib.sessions.middleware.SessionMiddleware", 57 | "django.middleware.common.CommonMiddleware", 58 | "django.middleware.csrf.CsrfViewMiddleware", 59 | "django.contrib.auth.middleware.AuthenticationMiddleware", 60 | "django.contrib.messages.middleware.MessageMiddleware", 61 | "django.middleware.clickjacking.XFrameOptionsMiddleware", 62 | ] 63 | 64 | ROOT_URLCONF = "nuxt_django_auth.urls" 65 | 66 | TEMPLATES = [ 67 | { 68 | "BACKEND": "django.template.backends.django.DjangoTemplates", 69 | "DIRS": [], 70 | "APP_DIRS": True, 71 | "OPTIONS": { 72 | "context_processors": [ 73 | "django.template.context_processors.debug", 74 | "django.template.context_processors.request", 75 | "django.contrib.auth.context_processors.auth", 76 | "django.contrib.messages.context_processors.messages", 77 | ], 78 | }, 79 | }, 80 | ] 81 | 82 | WSGI_APPLICATION = "nuxt_django_auth.wsgi.application" 83 | 84 | 85 | # Database 86 | # https://docs.djangoproject.com/en/3.0/ref/settings/#databases 87 | 88 | DATABASES = { 89 | "default": { 90 | "ENGINE": "django.db.backends.sqlite3", 91 | "NAME": os.path.join(BASE_DIR, "db.sqlite3"), 92 | } 93 | } 94 | 95 | 96 | # Password validation 97 | # https://docs.djangoproject.com/en/3.0/ref/settings/#auth-password-validators 98 | 99 | AUTH_PASSWORD_VALIDATORS = [ 100 | { 101 | "NAME": "django.contrib.auth.password_validation.UserAttributeSimilarityValidator", 102 | }, 103 | {"NAME": "django.contrib.auth.password_validation.MinimumLengthValidator",}, 104 | {"NAME": "django.contrib.auth.password_validation.CommonPasswordValidator",}, 105 | {"NAME": "django.contrib.auth.password_validation.NumericPasswordValidator",}, 106 | ] 107 | 108 | 109 | # Internationalization 110 | # https://docs.djangoproject.com/en/3.0/topics/i18n/ 111 | 112 | LANGUAGE_CODE = "en-us" 113 | 114 | TIME_ZONE = "UTC" 115 | 116 | USE_I18N = True 117 | 118 | USE_L10N = True 119 | 120 | USE_TZ = True 121 | 122 | 123 | # Static files (CSS, JavaScript, Images) 124 | # https://docs.djangoproject.com/en/3.0/howto/static-files/ 125 | 126 | STATIC_URL = "/static/" 127 | 128 | 129 | # Shell plus settings 130 | SHELL_PLUS_PRINT_SQL = True 131 | SHELL_PLUS = "ptipython" 132 | SHELL_PLUS_PRINT_SQL_TRUNCATE = 10000 133 | SHELL_PLUS_SQLPARSE_FORMAT_KWARGS = dict(reindent_aligned=True, truncate_strings=10000) 134 | 135 | # Rest Settings 136 | REST_FRAMEWORK = { 137 | "DEFAULT_PERMISSION_CLASSES": ("rest_framework.permissions.IsAuthenticated",), 138 | "DEFAULT_AUTHENTICATION_CLASSES": ( 139 | "rest_framework.authentication.BasicAuthentication", 140 | "rest_framework.authentication.SessionAuthentication", 141 | "dj_rest_auth.utils.JWTCookieAuthentication", 142 | ), 143 | } 144 | 145 | # Use JWT with dj_rest_auth 146 | REST_USE_JWT = True 147 | JWT_AUTH_COOKIE = "my-app-auth" 148 | 149 | SITE_ID = 1 150 | 151 | # Django allauth settings 152 | SOCIALACCOUNT_PROVIDERS = { 153 | "facebook": { 154 | "METHOD": "oauth2", 155 | "SCOPE": ["email", "public_profile"], 156 | "FIELDS": [ 157 | "id", 158 | "email", 159 | "name", 160 | "first_name", 161 | "last_name", 162 | "verified", 163 | "locale", 164 | "timezone", 165 | "link", 166 | "gender", 167 | "updated_time", 168 | ], 169 | "EXCHANGE_TOKEN": True, 170 | } 171 | } 172 | 173 | # Enable GET logout 174 | ACCOUNT_LOGOUT_ON_GET = True 175 | 176 | # Disable email verification since this is just a test. 177 | # If you want to enable it, you'll need to configure django-allauth's email confirmation pages 178 | SOCIALACCOUNT_EMAIL_VERIFICATION = "none" 179 | SOCIALACCOUNT_EMAIL_REQUIRED = False 180 | 181 | # CORS Settings 182 | CORS_ORIGIN_ALLOW_ALL = True 183 | -------------------------------------------------------------------------------- /backend/nuxt_django_auth/social.py: -------------------------------------------------------------------------------- 1 | from allauth.socialaccount.providers.facebook.views import FacebookOAuth2Adapter 2 | from allauth.socialaccount.providers.oauth2.client import OAuth2Client 3 | from dj_rest_auth.registration.views import SocialLoginView 4 | 5 | 6 | class FacebookLogin(SocialLoginView): 7 | adapter_class = FacebookOAuth2Adapter 8 | callback_url = "http://localhost:3000/callback" 9 | client_class = OAuth2Client 10 | -------------------------------------------------------------------------------- /backend/nuxt_django_auth/urls.py: -------------------------------------------------------------------------------- 1 | """nuxt_django_auth URL Configuration 2 | 3 | The `urlpatterns` list routes URLs to views. For more information please see: 4 | https://docs.djangoproject.com/en/3.0/topics/http/urls/ 5 | Examples: 6 | Function views 7 | 1. Add an import: from my_app import views 8 | 2. Add a URL to urlpatterns: path('', views.home, name='home') 9 | Class-based views 10 | 1. Add an import: from other_app.views import Home 11 | 2. Add a URL to urlpatterns: path('', Home.as_view(), name='home') 12 | Including another URLconf 13 | 1. Import the include() function: from django.urls import include, path 14 | 2. Add a URL to urlpatterns: path('blog/', include('blog.urls')) 15 | """ 16 | from django.contrib import admin 17 | from django.urls import path, include 18 | from .social import FacebookLogin 19 | from .api import UserInfo 20 | 21 | urlpatterns = [ 22 | path("admin/", admin.site.urls), 23 | # Django Rest Explorer UI 24 | path("api-auth/", include("rest_framework.urls")), 25 | # API urls 26 | path("api/me/", UserInfo.as_view(), name="user_info"), 27 | # Authentication 28 | path("auth/", include("dj_rest_auth.urls")), 29 | path("auth/social/facebook/", FacebookLogin.as_view(), name="fb_login"), 30 | ] 31 | -------------------------------------------------------------------------------- /backend/nuxt_django_auth/wsgi.py: -------------------------------------------------------------------------------- 1 | """ 2 | WSGI config for nuxt_django_auth project. 3 | 4 | It exposes the WSGI callable as a module-level variable named ``application``. 5 | 6 | For more information on this file, see 7 | https://docs.djangoproject.com/en/3.0/howto/deployment/wsgi/ 8 | """ 9 | 10 | import os 11 | 12 | from django.core.wsgi import get_wsgi_application 13 | 14 | os.environ.setdefault("DJANGO_SETTINGS_MODULE", "nuxt_django_auth.settings") 15 | 16 | application = get_wsgi_application() 17 | -------------------------------------------------------------------------------- /backend/requirements.txt: -------------------------------------------------------------------------------- 1 | black==19.10b0 2 | dj-rest-auth==1.0.7 3 | Django==3.0.7 4 | django-allauth==0.42.0 5 | django-cors-headers==3.3.0 6 | django-extensions==2.2.9 7 | djangorestframework==3.11.0 8 | djangorestframework-simplejwt==4.4.0 9 | ptipython==1.0.1 10 | pylint==2.5.3 11 | pylint-django==2.0.15 12 | Werkzeug==1.0.1 13 | -------------------------------------------------------------------------------- /frontend/.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /frontend/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | browser: true, 5 | node: true, 6 | }, 7 | extends: [ 8 | '@nuxtjs/eslint-config-typescript', 9 | 'prettier', 10 | 'prettier/vue', 11 | 'plugin:nuxt/recommended', 12 | ], 13 | plugins: ['prettier'], 14 | // add your custom rules here 15 | rules: { 16 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 17 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 18 | }, 19 | } 20 | -------------------------------------------------------------------------------- /frontend/.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### Node template 3 | # Logs 4 | /logs 5 | *.log 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | 10 | # Runtime data 11 | pids 12 | *.pid 13 | *.seed 14 | *.pid.lock 15 | 16 | # Directory for instrumented libs generated by jscoverage/JSCover 17 | lib-cov 18 | 19 | # Coverage directory used by tools like istanbul 20 | coverage 21 | 22 | # nyc test coverage 23 | .nyc_output 24 | 25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 26 | .grunt 27 | 28 | # Bower dependency directory (https://bower.io/) 29 | bower_components 30 | 31 | # node-waf configuration 32 | .lock-wscript 33 | 34 | # Compiled binary addons (https://nodejs.org/api/addons.html) 35 | build/Release 36 | 37 | # Dependency directories 38 | node_modules/ 39 | jspm_packages/ 40 | 41 | # TypeScript v1 declaration files 42 | typings/ 43 | 44 | # Optional npm cache directory 45 | .npm 46 | 47 | # Optional eslint cache 48 | .eslintcache 49 | 50 | # Optional REPL history 51 | .node_repl_history 52 | 53 | # Output of 'npm pack' 54 | *.tgz 55 | 56 | # Yarn Integrity file 57 | .yarn-integrity 58 | 59 | # dotenv environment variables file 60 | .env 61 | 62 | # parcel-bundler cache (https://parceljs.org/) 63 | .cache 64 | 65 | # next.js build output 66 | .next 67 | 68 | # nuxt.js build output 69 | .nuxt 70 | 71 | # Nuxt generate 72 | dist 73 | 74 | # vuepress build output 75 | .vuepress/dist 76 | 77 | # Serverless directories 78 | .serverless 79 | 80 | # IDE / Editor 81 | .idea 82 | 83 | # Service worker 84 | sw.* 85 | 86 | # macOS 87 | .DS_Store 88 | 89 | # Vim swap files 90 | *.swp 91 | -------------------------------------------------------------------------------- /frontend/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false, 3 | "arrowParens": "always", 4 | "singleQuote": true 5 | } 6 | -------------------------------------------------------------------------------- /frontend/.template.env: -------------------------------------------------------------------------------- 1 | API_URL=http://localhost:8000 2 | FACEBOOK_KEY= 3 | -------------------------------------------------------------------------------- /frontend/README.md: -------------------------------------------------------------------------------- 1 | # nuxt-django-auth 2 | 3 | > Nuxt + Django + Auth 4 | 5 | ## Build Setup 6 | 7 | ```bash 8 | # install dependencies 9 | $ yarn install 10 | 11 | # serve with hot reload at localhost:3000 12 | $ yarn dev 13 | 14 | # build for production and launch server 15 | $ yarn build 16 | $ yarn start 17 | 18 | # generate static project 19 | $ yarn generate 20 | ``` 21 | 22 | For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org). 23 | -------------------------------------------------------------------------------- /frontend/assets/README.md: -------------------------------------------------------------------------------- 1 | # ASSETS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked). 8 | -------------------------------------------------------------------------------- /frontend/assets/css/tailwind.css: -------------------------------------------------------------------------------- 1 | /* purgecss start ignore */ 2 | @import 'tailwindcss/base'; 3 | @import 'tailwindcss/components'; 4 | /* purgecss end ignore */ 5 | @import 'tailwindcss/utilities'; 6 | -------------------------------------------------------------------------------- /frontend/components/Logo.vue: -------------------------------------------------------------------------------- 1 | 26 | 31 | 46 | -------------------------------------------------------------------------------- /frontend/components/README.md: -------------------------------------------------------------------------------- 1 | # COMPONENTS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | The components directory contains your Vue.js Components. 6 | 7 | _Nuxt.js doesn't supercharge these components._ 8 | -------------------------------------------------------------------------------- /frontend/jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": ".", 4 | "paths": { 5 | "~/*": ["./*"], 6 | "@/*": ["./*"], 7 | "~~/*": ["./*"], 8 | "@@/*": ["./*"] 9 | } 10 | }, 11 | "exclude": ["node_modules", ".nuxt", "dist"] 12 | } 13 | -------------------------------------------------------------------------------- /frontend/layouts/README.md: -------------------------------------------------------------------------------- 1 | # LAYOUTS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Application Layouts. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts). 8 | -------------------------------------------------------------------------------- /frontend/layouts/default.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 75 | -------------------------------------------------------------------------------- /frontend/middleware/README.md: -------------------------------------------------------------------------------- 1 | # MIDDLEWARE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your application middleware. 6 | Middleware let you define custom functions that can be run before rendering either a page or a group of pages. 7 | 8 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware). 9 | -------------------------------------------------------------------------------- /frontend/nuxt.config.ts: -------------------------------------------------------------------------------- 1 | import { Configuration } from '@nuxt/types' 2 | import dotenv from 'dotenv' 3 | 4 | dotenv.config() 5 | 6 | const config: Configuration = { 7 | mode: 'universal', 8 | router: { 9 | middleware: ['auth'], 10 | }, 11 | /* 12 | ** Headers of the page 13 | */ 14 | head: { 15 | title: process.env.npm_package_name || '', 16 | meta: [ 17 | { charset: 'utf-8' }, 18 | { name: 'viewport', content: 'width=device-width, initial-scale=1' }, 19 | { 20 | hid: 'description', 21 | name: 'description', 22 | content: process.env.npm_package_description || '', 23 | }, 24 | ], 25 | link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }], 26 | }, 27 | /* 28 | ** Customize the progress-bar color 29 | */ 30 | loading: { color: '#fff' }, 31 | /* 32 | ** Global CSS 33 | */ 34 | css: [], 35 | /* 36 | ** Plugins to load before mounting the App 37 | */ 38 | plugins: [], 39 | /* 40 | ** Nuxt.js dev-modules 41 | */ 42 | buildModules: [ 43 | '@nuxt/typescript-build', 44 | // Doc: https://github.com/nuxt-community/nuxt-tailwindcss 45 | '@nuxtjs/tailwindcss', 46 | ], 47 | /* 48 | ** Nuxt.js modules 49 | */ 50 | modules: [ 51 | // Doc: https://axios.nuxtjs.org/usage 52 | '@nuxtjs/axios', 53 | // Doc: https://github.com/nuxt-community/dotenv-module 54 | '@nuxtjs/dotenv', 55 | '@nuxtjs/auth-next', 56 | ], 57 | /* 58 | ** Axios module configuration 59 | ** See https://axios.nuxtjs.org/options 60 | */ 61 | axios: {}, 62 | /* 63 | ** Auth module configuration 64 | ** See https://auth.nuxtjs.org 65 | */ 66 | auth: { 67 | redirect: { 68 | callback: '/callback', 69 | }, 70 | strategies: { 71 | facebook: { 72 | responseType: 'code', 73 | clientId: process.env.FACEBOOK_KEY, 74 | scope: ['public_profile', 'email', 'user_birthday'], 75 | endpoints: { 76 | token: `${process.env.API_URL}/auth/social/facebook/`, 77 | userInfo: `${process.env.API_URL}/api/me/`, 78 | }, 79 | }, 80 | }, 81 | }, 82 | /* 83 | ** Build configuration 84 | */ 85 | build: { 86 | /* 87 | ** You can extend webpack config here 88 | */ 89 | watch: ['types'], 90 | extend(config, ctx) { 91 | // Fixes @nuxtjs/auth using fs on the client 92 | if (!ctx.isServer) { 93 | config.node = { 94 | fs: 'empty', 95 | } 96 | } 97 | if (ctx.isDev) { 98 | config.devtool = ctx.isClient ? 'source-map' : 'inline-source-map' 99 | } 100 | }, 101 | }, 102 | typescript: { 103 | typeCheck: { 104 | eslint: true, 105 | }, 106 | }, 107 | } 108 | 109 | export default config 110 | -------------------------------------------------------------------------------- /frontend/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nuxt-django-auth", 3 | "version": "1.0.0", 4 | "description": "Nuxt + Django + Auth", 5 | "author": "Maronato", 6 | "private": true, 7 | "scripts": { 8 | "dev": "nuxt-ts", 9 | "build": "nuxt-ts build", 10 | "generate": "nuxt-ts generate", 11 | "start": "nuxt-ts start", 12 | "lint": "eslint --ext .js,.vue --ignore-path .gitignore ." 13 | }, 14 | "lint-staged": { 15 | "*.{js,vue}": "yarn lint" 16 | }, 17 | "husky": { 18 | "hooks": { 19 | "pre-commit": "lint-staged" 20 | } 21 | }, 22 | "dependencies": { 23 | "@nuxt/typescript-runtime": "^0.4.0", 24 | "@nuxtjs/auth-next": "^5.0.0-1591630887.eba51b3", 25 | "@nuxtjs/axios": "^5.3.6", 26 | "@nuxtjs/dotenv": "^1.4.0", 27 | "nuxt": "^2.0.0" 28 | }, 29 | "devDependencies": { 30 | "@nuxt/typescript-build": "^0.6.0", 31 | "@nuxtjs/eslint-config-typescript": "^2.0.0", 32 | "@nuxtjs/eslint-module": "^1.0.0", 33 | "@nuxtjs/tailwindcss": "^1.0.0", 34 | "babel-eslint": "^10.0.1", 35 | "eslint": "^6.1.0", 36 | "eslint-config-prettier": "^6.10.0", 37 | "eslint-plugin-nuxt": "^1.0.0", 38 | "eslint-plugin-prettier": "^3.1.3", 39 | "husky": "^4.0.0", 40 | "lint-staged": "^10.0.0", 41 | "prettier": "^2.0.5", 42 | "stylelint-config-recommended": "^3.0.0" 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /frontend/pages/README.md: -------------------------------------------------------------------------------- 1 | # PAGES 2 | 3 | This directory contains your Application Views and Routes. 4 | The framework reads all the `*.vue` files inside this directory and creates the router of your application. 5 | 6 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing). 7 | -------------------------------------------------------------------------------- /frontend/pages/callback.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 11 | -------------------------------------------------------------------------------- /frontend/pages/index.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 30 | 31 | 54 | -------------------------------------------------------------------------------- /frontend/pages/login.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | 17 | -------------------------------------------------------------------------------- /frontend/pages/secret.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 9 | 10 | -------------------------------------------------------------------------------- /frontend/plugins/README.md: -------------------------------------------------------------------------------- 1 | # PLUGINS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains Javascript plugins that you want to run before mounting the root Vue.js application. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins). 8 | -------------------------------------------------------------------------------- /frontend/static/README.md: -------------------------------------------------------------------------------- 1 | # STATIC 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your static files. 6 | Each file inside this directory is mapped to `/`. 7 | Thus you'd want to delete this README.md before deploying to production. 8 | 9 | Example: `/static/robots.txt` is mapped as `/robots.txt`. 10 | 11 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static). 12 | -------------------------------------------------------------------------------- /frontend/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Maronato/nuxt-django-auth/5c9cba6c75f62909aab29f52811aa72e44304efe/frontend/static/favicon.ico -------------------------------------------------------------------------------- /frontend/store/README.md: -------------------------------------------------------------------------------- 1 | # STORE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Vuex Store files. 6 | Vuex Store option is implemented in the Nuxt.js framework. 7 | 8 | Creating a file in this directory automatically activates the option in the framework. 9 | 10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store). 11 | -------------------------------------------------------------------------------- /frontend/store/index.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Maronato/nuxt-django-auth/5c9cba6c75f62909aab29f52811aa72e44304efe/frontend/store/index.ts -------------------------------------------------------------------------------- /frontend/stylelint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ['stylelint-config-recommended'], 3 | rules: { 4 | 'at-rule-no-unknown': [ 5 | true, 6 | { 7 | ignoreAtRules: [ 8 | 'tailwind', 9 | 'apply', 10 | 'variants', 11 | 'responsive', 12 | 'screen', 13 | ], 14 | }, 15 | ], 16 | 'declaration-block-trailing-semicolon': null, 17 | 'no-descending-specificity': null, 18 | }, 19 | } 20 | -------------------------------------------------------------------------------- /frontend/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /* 2 | ** TailwindCSS Configuration File 3 | ** 4 | ** Docs: https://tailwindcss.com/docs/configuration 5 | ** Default: https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js 6 | */ 7 | module.exports = { 8 | theme: {}, 9 | variants: {}, 10 | plugins: [] 11 | } 12 | -------------------------------------------------------------------------------- /frontend/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2018", 4 | "module": "esnext", 5 | "moduleResolution": "node", 6 | "lib": ["esnext", "esnext.asynciterable", "dom"], 7 | "esModuleInterop": true, 8 | "allowJs": true, 9 | "sourceMap": true, 10 | "strict": true, 11 | "noEmit": true, 12 | "experimentalDecorators": true, 13 | "baseUrl": ".", 14 | "paths": { 15 | "~/*": ["./*"], 16 | "@/*": ["./*"] 17 | }, 18 | "types": ["@types/node", "@nuxt/types", "@nuxtjs/auth-next"] 19 | }, 20 | "exclude": ["node_modules", ".nuxt", "dist"] 21 | } 22 | -------------------------------------------------------------------------------- /frontend/types/vue-shim.d.ts: -------------------------------------------------------------------------------- 1 | declare module "*.vue" { 2 | import Vue from 'vue' 3 | export default Vue 4 | } 5 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # Nuxt + Django + Auth 2 | 3 | Demo project that implements Facebook Auth with Nuxt and Django 4 | 5 | ![Demo gif](https://media.giphy.com/media/hsC45K9bgX8mFEhgFm/source.gif) 6 | 7 | ## Setting up 8 | 9 | First, make sure you have created an [app on Facebook](https://developers.facebook.com/) 10 | 11 | Have your `app_id` and `app_secret` handy for the next steps. 12 | 13 | ### Configuring the Frontend 14 | 15 | Install [Yarn](https://yarnpkg.com/) if you haven't already. 16 | 17 | 1. Navigate to `frontend/` 18 | 2. Run `yarn install` to install all dependencies 19 | 3. Rename `.template.env` to `.env` and update it with your `app_id` 20 | 4. Start the server with `yarn dev` 21 | 22 | You'll find your app available at [localhost:3000](http://localhost:3000). You won't be able to log in yet, though. 23 | 24 | ### Configuring the Backend 25 | 26 | This step assumes you're using Python 3.x 27 | 28 | 1. Navigate to `backend/` 29 | 2. Run `pip install -r requirements.txt` to install all dependencies 30 | 3. Run `python manage.py migrate` to create the database 31 | 4. Create a superuser with `python manage.py createsuperuser` 32 | 5. Start your server with `python manage.py runserver_plus` 33 | 6. Login using your admin credentials [localhost:8000/admin](http://localhost:8000/admin) 34 | 7. Click on [Social applications](http://localhost:8000/admin/socialaccount/socialapp/add/) and create a new Facebook application with your `app_id` and `app_secret` 35 | 36 | Done! Now you may go back to [localhost:3000](http://localhost:3000) and log in. 37 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./frontend/tsconfig.json" 3 | } 4 | --------------------------------------------------------------------------------