0

I am trying to create password reset api using Django Rest Framework and Angular 6. But when I try to do POST call to the password reset url I am receiving error saying "CSRF verification failed. Request aborted"

my url.py file includes:

    url(r'password-reset/', auth_views.PasswordResetView.as_view()),
    url(r'password-reset/done/', auth_views.PasswordResetDoneView.as_view()),
    url(r'password-reset-confirm/<uidb64>/<token>/', auth_views.PasswordResetConfirmView.as_view()),
    url(r'password_reset_complete/',auth_views.PasswordResetCompleteView.as_view())

For the front end I am using Angular as follows:

my forgot-password.html includes:

<navbar></navbar>
      <div class="container-fluid px-xl-5">
          <section class="py-5">
            <div class="row">
              <div class="col-lg-12 mb-5">
                <div class="card">
                  <div class="card-header" style="text-align: center;">
                    <h3 class="h6 text-uppercase mb-0">RESET PASSWORD FORM</h3>
                  </div>
                  <div class="card-body">
                    <form class="form-horizontal" #forgotPassword="ngForm">
                      <div class="form-group row">
                        <label class="col-md-3 form-control-label">Email Address</label>
                        <div class="col-md-6">
                          <input class="validate" #email="ngModel" [(ngModel)]="input.email" name= "email" type="email" placeholder="Email Address" class="form-control" [pattern]="emailpattern" required>
                          <div class="alert alert-danger" *ngIf="email.touched && !email.valid">Email is required!</div>                        
                        </div>
                      </div>
                      <div class="line"></div>

                      <div class="alert alert-success" *ngIf="successMessage">{{ successMessage }}</div>                        
                      <div class="alert alert-danger" *ngIf="errorMessage">{{ errorMessage }}</div>                        
                      <div class="form-group row">
                        <label class="col-md-3 form-control-label"><a routerLink="/login">Back to Login</a></label>
                        <div class="col-md-12" style="text-align: center;">
                         <button (click)="submitEmail()" type="submit" class="btn btn-primary shadow" [disabled]="!forgotPassword.valid">Send Reset Link</button>
                        </div>
                        </div>
                    </form>
                  </div>
                </div>
              </div>
            </div>
          </section>
      </div>

and forgot-password.ts file is as follow:

import { Component, OnInit } from '@angular/core';
import { UsersService } from 'src/app/services/users.service';

@Component({
  selector: 'app-forgot-password',
  templateUrl: './forgot-password.component.html',
  styleUrls: ['./forgot-password.component.scss'],
  providers: [UsersService]
})
export class ForgotPasswordComponent implements OnInit {
  input;
  emailpattern = "[a-z0 - 9!#$%& '*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&' * +/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?";
  errorMessage: string = '';
  successMessage: string = '';

  constructor(private userService: UsersService) { }

  ngOnInit() {
    this.input = {
      email: ''
    };
  }

  submitEmail() {
    this.successMessage = '';
    this.errorMessage = '';
    this.userService.resetPassword(this.input).subscribe(
      response => {
        this.successMessage = 'Please Check you mail for password reset link!';
      },
      error => this.errorMessage = 'Please enter correct email or try again later!'
    );
  }
}

and finally .service is as follows:

  resetPassword(data): Observable<any> {
    return this.http.post('http://127.0.0.1:8000/api/password-reset/', data);
  }

I am not able to understand what to do and how to solve this issue.

Ahsan Zubair
  • 39
  • 4
  • 2
    Please go through https://stackoverflow.com/a/18156756/4186008. You need to add CSRF token in your POST requests. – Aman Garg Apr 16 '19 at 19:12

1 Answers1

0

CSRF are usually used if session authentication. SPAs don't use this kind of auth (usually it's used another pattern such as JSON web tokens). You can disable CSRF in the Django as explained here: Django Rest Framework remove csrf

Christian Benseler
  • 7,216
  • 6
  • 33
  • 58