I've created an API hub using Django and a frontend application with NextJS. Currently, I'm working on implementing authentication from the NextJS app to the Django API and I'm seeking advice on best practices.
At the moment, the NextJS app sends the user's username and password to an endpoint, which then returns either the user's token or an error if there is an issue.
React
const login = async () => {
let token = await axios.post('/api/accounts/', {
email: email,
password: password
}).then(r => r.data.token).catch(function (error) { console.log(error) })
if (token) {
router.push({
pathname: '/home/',
query: { token: token },
})
}
}
NextJS server api/accounts
export default async (req, res) => {
if (req.method === 'POST') {
try {
// retrieve payment intent data
const {data} = await axios.post('https://website/api/api-token-auth/', req.body)
res.status(200).send(data)
} catch (err) {
res.status(500).json({ statusCode: 500, message: err.message })
}
} else {
res.setHeader('Allow', 'POST')
res.status(405).end('Method Not Allowed')
}
}
Django API
@csrf_exempt
@api_view(["POST"])
@permission_classes((AllowAny,))
def obtain_auth_token(request):
email = request.data.get("email")
password = request.data.get("password")
if email is None or password is None:
return Response({'error': 'Please provide both email and password'},
status=HTTP_400_BAD_REQUEST)
user = authenticate(email=email, password=password)
if not user:
return Response({'error': 'Invalid Credentials'},
status=HTTP_404_NOT_FOUND)
token, _ = Token.objects.get_or_create(user=user)
return Response({'token': token.key},
status=HTTP_200_OK)
After receiving the token, I redirect the user to the homepage.
My queries are:
Is my current method of authenticating users effective? Am I missing anything crucial? This is my first attempt at authentication and I want to ensure it's done correctly.
How should I securely store this token? What is considered "best practice" for handling authentication credentials? I'm considering passing the token to every component that requires it or storing it in LocalStorage, but I'm unsure of the most common approach.
Any guidance you can offer would be greatly appreciated!
Thank you in advance!