User authentication has become a fundamental part of almost every system in the world, with most websites and apps requiring users to login/logout or identify themselves in one way or another. In this article we will use SuperTokens to add user authentication to a Flask app.
\nSuperTokens is an open source authentication solution that lets you quickly add login mechanisms and session management to your frontend and backend systems. It supports most login mechanisms such as Email & Password, Passwordless, Social login etc. We have two options to quickly get started with SuperTokens:
\nAn important thing to keep in mind is that SuperTokens requires a “core” to work correctly, the CLI uses a demo core that has been hosted to allow you to experiment with the SDKs quickly. This core should not be used in production.
\nSuperTokens provides a command line tool that can be used to quickly get started. It generates a fresh project with SuperTokens already integrated and enabled. If you are starting a new project and plan to use SuperTokens, this is the best way to get authentication added to your system. As a bonus the CLI also generates a fully functioning web application using the frontend of your choice. This UI layer uses a pre-built UI provided by the frontend SDKs with auth forms and redirects for social logins already built and handled for you.
\nTo get started open your Terminal/Command Prompt and run the following command:
\nnpx create-supertokens-app@latestYou will be presented with the following options:
\nOnce the CLI completes you can open the project in the IDE of your choice, for the sake of this example we will cover just the backend side of things.
\nThe generated structure is fairly straightforward, if you need to set up a specific folder structure for your architecture it is better to do so now to avoid having to change imports later. Code snippets in this article will assume you have not changed the structure.
\nThe config.py file is where you configure SuperTokens.
supertokens_config = SupertokensConfig(\n connection_uri=\"https://try.supertokens.com\")The connection_uri property tells the SDK where the SuperTokens core is hosted, this can be a self hosted core or using the managed service SuperTokens provides. In this example we are using a demo core, this should be replaced with your own connection uri because the demo core is not suitable for production.
app_info = InputAppInfo(\n app_name=\"Supertokens\",\n api_domain=\"http://localhost:3001\",\n website_domain=\"http://localhost:3000\",\n)The api_domain should be the domain where your API layer will be hosted (or localhost during testing), this is used for session management. Similarly the website_domain should be where your frontend will be hosted, if you are not building a frontend right now you can leave this as is or use a dummy domain.
recipe_list = [\n session.init(),\n emailpassword.init(),\n dashboard.init(),\n]The recipe_list tells the SuperTokens SDK what features and Authentication mechanisms you want to enable. In this example we are enabling session management which is the central feature for all authentication mechanisms and email password. We are also enabling the dashboard recipe, read the documentation to understand what this is and how you can use it.
Inside the app.py file you will see the following code (For the sake of this article we are only covering important snippets of the full file):
from supertokens_python import (\n get_all_cors_headers,\n init,\n)\nfrom flask_cors import CORS\n\nfrom supertokens_python.framework.flask import Middleware\nimport config\n\ninit(\n supertokens_config=config.supertokens_config,\n app_info=config.app_info,\n framework=config.framework,\n recipe_list=config.recipe_list,\n)\n\napp = Flask(__name__)\nMiddleware(app)\nCORS(\n app=app,\n supports_credentials=True,\n origins=\"http://localhost:3000\",\n allow_headers=[\"Content-Type\"] + get_all_cors_headers(),\n)The init function is what you use to initialize the SuperTokens SDK, here you provide the configuration options defined in the config.py file.
SuperTokens provides its own APIs and logic for handling authentication, the Middleware adds this to your system. This means that you do not need to implement your own APIs for handling authentication.
We also use the get_all_cors_headers function provided by SuperTokens to add all the relevant CORS headers to the CORS middleware. Notice that the origin must match the website_domain set in the config.py file. To learn more about CORS read this article.
You can run the project by running the following command:
\ncd supertokens-flask-sample\nnpm run startNotice that we use npm here, this is because the CLI internally generates a Node project to run both the backend and the frontend. This allows you to use the frontend project to test your backend integration. If you only want to run the backend project and test it out using Postman you can run the following commands:
\ncd backend\npip install virtualenv\nvirtualenv venv\nchmod +x venv/bin/activate\n. venv/bin/activate\npip install -r requirements.txt\npython app.pyAnd that’s it, the project is set up and you can start building your actual project logic instead of spending time trying to build authentication from scratch. Here are some quick links for you:
\nAn important thing to keep in mind is that SuperTokens requires a “core” to work correctly, the CLI uses a demo core that has been hosted to allow you to experiment with the SDKs quickly. This core should not be used in production.
\nThe full set of steps required to set up SuperTokens manually can be found in the official documentation.
\nRun the following command:
\npip install supertokens-pythonTo initialize the SDK, use the following code:
\nfrom supertokens_python import init, InputAppInfo, SupertokensConfig\nfrom supertokens_python.recipe import emailpassword, session\n\ninit(\n app_info=InputAppInfo(\n app_name=\"ST\",\n api_domain=\"http://localhost:3001\",\n website_domain=\"http://localhost:3000\",\n ),\n supertokens_config=SupertokensConfig(\n connection_uri=\"https://try.supertokens.com\",\n ),\n framework='flask',\n recipe_list=[\n session.init(),\n emailpassword.init()\n ]\n)The init function is what you use to initialize the SuperTokens SDK, here you provide the configuration options such as app name, api and website domains and the recipe list.
The connection_uri property tells the SDK where the SuperTokens core is hosted, this can be a self hosted core or using the managed service SuperTokens provides. In this example we are using a demo core, this should be replaced with your own connection uri because the demo core is not suitable for production.
The api_domain should be the domain where your API layer will be hosted (or localhost during testing), this is used for session management. Similarly the website_domain should be where your frontend will be hosted, if you are not building a frontend right now you can leave this as is or use a dummy domain.
The recipe_list tells the SuperTokens SDK what features and Authentication mechanisms you want to enable. In this example we are enabling session management which is the central feature for all authentication mechanisms and email password. We are also enabling the dashboard recipe, read the documentation to understand what this is and how you can use it.
from supertokens_python import get_all_cors_headers\nfrom flask import Flask, abort\nfrom flask_cors import CORS \nfrom supertokens_python.framework.flask import Middleware\n\napp = Flask(__name__)\nMiddleware(app)\n\nCORS(\n app=app,\n origins=[\n \"http://localhost:3000\"\n ],\n supports_credentials=True,\n allow_headers=[\"Content-Type\"] + get_all_cors_headers(),\n)\n\n# TODO: Add your own APIs here\n\n# This is required since if this is not there, then OPTIONS requests for\n# the APIs exposed by the supertokens' Middleware will return a 404\n@app.route('/', defaults={'u_path': ''}) \n@app.route('/<path:u_path>') \ndef catch_all(u_path: str):\n abort(404)SuperTokens provides its own APIs and logic for handling authentication, the Middleware adds this to your system. This means that you do not need to implement your own APIs for handling authentication. You can see all the APIs that middleware adds here.
We also use the get_all_cors_headers function provided by SuperTokens to add all the relevant CORS headers to the CORS middleware. Notice that the origin must match the website_domain. To learn more about CORS read this article. Make sure to also install flask_cors.
You can now run your project to test that SuperTokens works correctly. For example you can try calling one of the APIs added by the SDK and see if they respond correctly.
\nHere are some quick links for you:
\nSuperTokens allows you to set up and start using authentication in a very simple and quick way, allowing you to focus on building your application specific logic instead of having to spend time building auth from scratch. The SuperTokens SLI lets you get started even quicker, allowing you to create a fresh application with SuperTokens integrated in under 15 minutes and as a bonus also gives you a ready to use frontend!
","frontmatter":{"date":"November 04, 2024","title":"Adding Authentication to Your Flask Backend with SuperTokens","cover":"flask-user-authentication.png","author":"Nemi Shah","description":"Learn how to seamlessly add authentication to your Flask backend using SuperTokens. This guide covers setting up authentication with the SuperTokens CLI or manual configuration, enabling you to focus on building application logic instead of authentication infrastructure."},"fields":{"slug":"/flask-user-authentication/"}},"site":{"siteMetadata":{"title":"SuperTokens Blog"}}},"pageContext":{"id":"7bb05f05-3aae-5793-b603-ca62f3f0159d","fields__slug":"/flask-user-authentication/","__params":{"fields__slug":"flask-user-authentication"}}}, "staticQueryHashes": []}